├── README.md ├── package.json └── index.js /README.md: -------------------------------------------------------------------------------- 1 | #gulp-imageisux 2 | 3 | [![NPM](https://nodei.co/npm/gulp-imageisux.png)](https://nodei.co/npm/gulp-imageisux/) 4 | 5 | [智图](http://zhitu.isux.us/)的gulp插件 6 | 7 | ##Introduce 8 | 这是智图的gulp插件，它能自动压缩图片，并生成对应的webp格式(可选)。 9 | 你只需要声明`src(path)`图片源地址，并执行方法`pipe(imageisux())`就好了。 10 | 11 | ##Install 12 | 当然，你需要先安装[gulp](http://gulpjs.com/)。 13 | 14 | ```js 15 | $ npm install --global gulp 16 | ``` 17 | 18 | 然后安装插件。 19 | 20 | ```js 21 | //全局安装 22 | $ npm install --global gulp-imageisux 23 | 24 | //局部安装 25 | $ npm install --save-dev gulp-imageisux 26 | ``` 27 | 28 | ##Usage 29 | 1、声明图片地址，例如放在img目录下面`gulp.src(['img/*'])`。 30 | 2、指定参数，压缩图片导出目录`/dest/`和是否同时导出webp格式。 31 | 32 | ```js 33 | var imageisux = require('gulp-imageisux'); 34 | 35 | gulp.task('imageisux', function() { 36 | return gulp.src(['img/*']) 37 | .pipe(imageisux('/dirpath/',true)); 38 | }); 39 | ``` 40 | 41 | ##API 42 | 两个参数，`dirpath`目标目录以及`enableWebp`是否同时导出对应WEBP格式图片。 43 | 44 | - `dirpath`: 如果未定义，会自动生成两个目录：'/dest/'目录放压缩后图片，'/webp/'目录放对应的webp格式压缩图片。 45 | 46 | - `enableWebp` : 若为`true`，则会同时输出webp图片；若为`false`，则只会有压缩后原格式图片。 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-imageisux", 3 | "version": "1.0.5", 4 | "description": "智图gulp插件", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/targetkiller/gulp-imageisux" 9 | }, 10 | "scripts": { 11 | "test": "mocha" 12 | }, 13 | "files": [ 14 | "index.js" 15 | ], 16 | "author": { 17 | "name": "TQ", 18 | "email": "targetkillering@gmail.com", 19 | "url": "http://tqtan.com" 20 | }, 21 | "keywords": [ 22 | "gulpplugin", 23 | "isux", 24 | "image", 25 | "img", 26 | "picture", 27 | "photo", 28 | "minify", 29 | "minifier", 30 | "compress", 31 | "png" 32 | ], 33 | "engines": { 34 | "node": ">=0.10.0" 35 | }, 36 | "license": "MIT", 37 | "dependencies": { 38 | "gulp-util": "~2.2.14", 39 | "gulp": "~3.3.4", 40 | "request": "~2.31.0", 41 | "through2": "~0.4.1", 42 | "needle": "*" 43 | }, 44 | "devDependencies": { 45 | "mocha": "*" 46 | }, 47 | "bugs": { 48 | "url": "https://github.com/targetkiller/gulp-imageisux/issues" 49 | }, 50 | "homepage": "https://github.com/targetkiller/gulp-imageisux", 51 | "_id": "gulp-imageisux@1.0.1", 52 | "dist": { 53 | 54 | }, 55 | "_from": "gulp-imageisux@", 56 | "_npmVersion": "1.4.14", 57 | "_npmUser": { 58 | "name": "TQ", 59 | "email": "targetkillering@gmail.com" 60 | }, 61 | "maintainers": [ 62 | { 63 | "name": "TQ", 64 | "email": "targetkillering@gmail.com" 65 | } 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var through = require('through2'); 2 | var request = require('request'); 3 | var gutil = require('gulp-util'); 4 | var needle = require('needle'); 5 | var path = require('path'); 6 | var fs = require('fs'); 7 | 8 | // global 9 | var _abspath; 10 | var enableWebp; 11 | var file_dirname; 12 | 13 | // if err, write the origin file instead 14 | function write_originfile(file_name){ 15 | if(file_dirname!==undefined){ 16 | // read file 17 | fs.readFile(file_dirname+'/'+file_name,'',function(err,body){ 18 | if(err){ 19 | gutil.log('[error]', file_name +' cannot read...'); 20 | } 21 | else{ 22 | var DEST_DIR; 23 | if(_abspath!==""){ 24 | DEST_DIR = file_dirname + _abspath; 25 | }else{ 26 | DEST_DIR = file_dirname + "/dest/"; 27 | } 28 | 29 | fs.exists(DEST_DIR,function(exists){ 30 | if(!exists){ 31 | fs.mkdirSync(DEST_DIR); 32 | } 33 | }); 34 | 35 | var fd = DEST_DIR + file_name; 36 | 37 | // read file 38 | fs.writeFile(fd, body, function(err, data){ 39 | if (err) { 40 | // gutil.log('[error]', '[fun write_originfile]'+ file_name +' cannot write, will be write again...'); 41 | // if err, write to file twice 42 | fs.writeFile(fd, body, function(err, data){ 43 | if (err) { 44 | gutil.log('[error]', file_name +' cannot write! Error info:'+err); 45 | } 46 | }); 47 | } 48 | }); 49 | } 50 | }); 51 | } 52 | else{ 53 | gutil.log('[error]', 'file_dirname is not exist!'); 54 | } 55 | } 56 | 57 | function imageisux (abspath,enableWebp) { 58 | var stream = through.obj(function(file,encoding,callback){ 59 | _abspath = abspath || ""; 60 | enableWebp = enableWebp || false; 61 | var _that = this; 62 | if (file.isNull()) { 63 | this.push(file); 64 | return callback(); 65 | } 66 | 67 | if (file.isStream()) { 68 | throw PluginError(PLUGIN_NAME, "Stream is not supported"); 69 | return callback(); 70 | } 71 | 72 | if (file.isBuffer()) { 73 | var file_path = file.path; 74 | file_dirname = path.dirname(file.path); 75 | var file_name = path.basename(file.path); 76 | var file_type = path.extname(file.path); 77 | file_type = file_type.slice(1,file_type.length); 78 | 79 | // surport jpg,png,gif 80 | if(file_type=='png'||file_type=='jpg'||file_type=='jpeg'||file_type=='gif'){ 81 | var data = { 82 | fileSelect: {file: file_path, content_type: 'image/'+file_type }, 83 | webp:enableWebp 84 | }; 85 | 86 | needle.post('http://zhitu.isux.us/index.php/preview/upload_file', data, {multipart:true}, function(err, resp ,body) { 87 | if(err){ 88 | gutil.log('[error]', file_name+' cannot post to the server.'); 89 | write_originfile(file_name); 90 | } 91 | else{ 92 | // server will return a json 93 | if(body.indexOf('{')>-1){ 94 | try{ 95 | // format the json 96 | var str = '({'+body.split('{')[1]+')'; 97 | var json_str = eval(str); 98 | 99 | /* 100 | * output: origin type of compressed images 101 | * output_webp: webp type of compressed images 102 | * output_code: the status code 103 | * size: images size 104 | */ 105 | var output = json_str.output; 106 | var output_webp = json_str.output_webp; 107 | var output_code = json_str.code; 108 | var size = json_str.size; 109 | 110 | /* 111 | * all the images return 112 | * type=1：origin 113 | * type=2：webp 114 | */ 115 | var output_ary = new Array(); 116 | // abspath is exist and need not use webp 117 | if(_abspath!=="" && enableWebp===false){ 118 | if(output!==undefined){ 119 | output_ary.push({'type':1,'url':output}); 120 | } 121 | else{ 122 | gutil.log('[error]','The return image '+file_name+' does not exist!'); 123 | } 124 | } 125 | 126 | // abspath is not exist, so init /dest/ and /webp/ and give the origin and webp-types. 127 | // if abspath is exist, so output the images to /abspath/ and give the webp-types to /webp/. 128 | else{ 129 | if(output!==undefined){ 130 | output_ary.push({'type':1,'url':output}); 131 | } 132 | else{ 133 | gutil.log('[error]',file_name+' cannot turn to origin-type!'); 134 | } 135 | 136 | if(output_webp!==undefined){ 137 | output_ary.push({'type':2,'url':output_webp}); 138 | } 139 | else{ 140 | gutil.log('[error]',file_name+' cannot turn to webp-type!'); 141 | } 142 | } 143 | 144 | var FILE_CONTENT = file_name.split('.'+file_type); 145 | var FILENAME = FILE_CONTENT[0]; 146 | var FILETYPE = file_type; 147 | 148 | for(var i = 0; i < output_ary.length; i++){ 149 | (function(){ 150 | var PREFIX = ""; 151 | var APPENDFIX = "."+FILETYPE; 152 | var OUTPUT_TYPE = output_ary[i].type; 153 | switch(OUTPUT_TYPE){ 154 | case 1: PREFIX = "";APPENDFIX = '.'+FILETYPE;break; 155 | case 2: PREFIX = "";APPENDFIX = ".webp";break; 156 | default:PREFIX="";break; 157 | } 158 | 159 | // download the image from server 160 | needle.get(output_ary[i].url, function(err, resp, body) { 161 | if(body) { 162 | if(_abspath!==""&&OUTPUT_TYPE==1){ 163 | var DEST_DIR = file_dirname + "/" + _abspath + "/"; 164 | } 165 | else if(OUTPUT_TYPE==1){ 166 | var DEST_DIR = file_dirname + "/dest/"; 167 | } 168 | else if(OUTPUT_TYPE==2){ 169 | var DEST_DIR = file_dirname + "/webp/"; 170 | } 171 | 172 | var fd = DEST_DIR + PREFIX + FILENAME + APPENDFIX; 173 | 174 | // make dir 175 | fs.exists(DEST_DIR,function(exists){ 176 | if(!exists){ 177 | fs.mkdirSync(DEST_DIR); 178 | } 179 | }); 180 | 181 | fs.writeFile(fd, body, function(err, data){ 182 | if (err) { 183 | // gutil.log('[error]', PREFIX + FILENAME + APPENDFIX +' cannot write, will be write again...'); 184 | // if err, write to file twice 185 | fs.writeFile(fd, body, function(err, data){ 186 | if (err) { 187 | gutil.log('[error]', PREFIX + FILENAME + APPENDFIX +' cannot write! Error info:'+err); 188 | write_originfile(file_name); 189 | } 190 | }); 191 | } 192 | }); 193 | } else { 194 | gutil.log('[error]','The data of '+file_name+' returned is not exist!'); 195 | write_originfile(file_name); 196 | } 197 | }); 198 | })(i); 199 | } 200 | } 201 | catch(err){ 202 | gutil.log('[error]','Format json data err, the filename is:'+ file_name); 203 | write_originfile(file_name); 204 | } 205 | 206 | } 207 | else{ 208 | gutil.log('[error]','The data returned has error! The file name is:'+file_name); 209 | write_originfile(file_name); 210 | } 211 | } 212 | }); 213 | } 214 | } 215 | _that.push(file); 216 | callback(); 217 | }); 218 | return stream; 219 | } 220 | 221 | module.exports = imageisux; 222 | --------------------------------------------------------------------------------