最近项目被人盗取了很多前端页面设计和功能, 很是操心,总结了下主要是由于以前经验不足,好多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文件夹中看你压缩后的文件就行了,效果还不错呢!