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文件夹中看你压缩后的文件就行了，效果还不错呢！