gulp实现js，css, image压缩

最近项目被人盗取了很多前端页面设计和功能， 很是操心，总结了下主要是由于以前经验不足，好多js都直接暴露在框架外部，前端没有进行压缩，后端没有做路径保护这些，今天研究了下gulp压缩js，css，image发现还是很好用滴。

1.安装node.js

下载地址： https://nodejs.org/en/ 安装教程： http://www.runoob.com/nodejs/nodejs-install-setup.html 安装完成后在cmd输入 node -v和 npm -v，出现版本号即为安装成功

2.安装gulp

1）先在全局安装   npm install -g gulp                                                                                     2）本地或项目安装 ，新建文件夹test(文件名自定义)，npm install gulp --save-dev

如果没有什么意外，这一步已经完成了70%了，但是今天我就是卡在这里，现象就是按照上面的流程走，然后 gulp -v 提示

“gulp不是内部或外部命令，也不是可运行的程序或批处理文件。”                                出现这个原因可能有两个：

1.gulp没有安装成功   2.windows全局变量有问题

1.解决办法：查看cmd窗口报错，看是否node的版本太低，我今天就是因为版本太低，然后安装不上

2.如果排除第一种，那就是windows全局变量有问题，打开控制面板，选择大图标，然后选择系统

排查你的安装地址和npminstall地址是否一致，如下图 ，我今天是因为卸载了之前安装的node，重新下载安装到c盘里了，所以第二次试的时候总是gulp无法识别。

在cmd输入 npm config get prefix 获取路径，新增路径到这里

然后重启cmd，再次查看gulp -v，一般这种情况下就会出现版本号，如果还有问题，大哥，请百度。

3.开始你的骚操作

现在你新建的文件夹下目录应该是这样

in是我要压缩的文件，out是压缩后的文件，下一步就是新建gulpfile.js在你新建的文件夹下，代码如下：

/*引入gulp及相关插件 require('node_modules里对应模块')*/ var gulp = require('gulp'); var minifyCss = require("gulp-minify-css"); var uglify = require('gulp-uglify'); var imageMin = require('gulp-imagemin'); //var concat = require('gulp-concat'); //css压缩 gulp.task('css', function (done) { gulp.src('in/css/*.css') .pipe(minifyCss()) .pipe(gulp.dest('out/css/')); done(); }); //js压缩 gulp.task('js', function(done) { gulp.src(['in/js/*.js']) .pipe(uglify({ // 混淆变量名 mangle: true, // 输出时将所有的中文转换为unicode output: {ascii_only: true} // 将所有压缩后的代码置于out/js文件夹 })) .pipe(gulp.dest('out/js')); done(); }); //图片压缩 gulp.task('image',function(done){ gulp.src('in/images/*.*') .pipe(imageMin({ optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 })) .pipe(gulp.dest('out/images')); done(); })

然后打开cmd，分别执行：gulp css；gulp js，gulp image，在out文件夹中看你压缩后的文件就行了，效果还不错呢！