前端自动化神器-gulp

OS:windows 7

虽然自己并不是从事前端开发， 但是面对公司杂乱的代码管理，不得不想个办法来规范一下。

代码管理杂乱，很大一部分是因为惰性，按照标准的方式修改太过于麻烦，每次都是用省事的办法去做。随着项目的迭代，代码越来越乱，每次上线都是问题不断。

从某种程度上说，人类想偷懒才会想到用工具去提高效率，计算机的发明，就是用来做复杂的计算。所以，我们想偷懒的事情，其他程序员肯定也遇到过，聪明的程序员就会用工具，保证质量的同时，提高自己的效率。

之前就听说过gulp，一直因为其他的事情没有来得及去看，今天终于下定决心去配置一下。简单的体验了几个功能后，由衷的感叹真是自动化的神器。

windows下使用gulp全纪录：

环境配置

(1)访问nodejs官网，下载安装包，我选的是v6.9.4 LTS版本，下载完成后双击安装。

安装完成后，在cmd下执行node -v和npm -v应该是可以获取到版本号的，如果获取不到，说明安装失败了。

(2)由于npm安装的插件是从国外下载，速度比较慢，国内的淘宝团队做了个一个镜像服务器，可以使用cnpm从国内镜像下载。本地安装cnpm：

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完成后，执行cnmp -v应该可以获取到版本号，以后只要在命令里用cnpm代替npm就可以了。

ps:还有一种更简单的方式，只要把npm的registry改成淘宝的就可以了

npm config set registry https://registry.npm.taobao.org

(3)本地安装gulp和gulp插件，cd到自己的项目路径下

例如：

cnpm install --save-dev gulp gulp-clean gulp-minify-css gulp-rename gulp-rev gulp-rev-collector gulp-concat gulp-notify gulp-html-replace gulp-replace gulp-htmlmin 

这里只是一个示例，根据自己的需要下载相应的插件即可。

插件都会下载到当前路径下的node_modules目录下，由于插件文件比较大，在协作开发时，如果大家要传输这个node_modules目录，就会比较浪费时间和资源，这时候就要用到package.json文件。

上面命令中加了--save-dev参数，就能将依赖的插件信息写到一个package.json文件，只要把这个文件加入代码工程里，执行npm install就能下载所有的依赖。

(4)将gulp任务添加到gulpfile文件，执行gulp命令即可。

一个简单的压缩js并对文件添加md5后缀的示例：

const gulp = require('gulp');
const uglify = require('gulp-uglify');    //压缩js
const rev = require('gulp-rev'); //- 对文件名加MD5后缀
const runSequence = require('run-sequence');//控制task顺序

gulp.task('build-js', function () {
    return gulp.src(['js/*.js'])
        //压缩js
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('dist/js/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/js'));

});

gulp.task('default', function (callback) {
    runSequence(
        'build-js',
        callback);
});

常用规则

前端开发，大家常用的功能一般是静态资源的压缩、文件名称添加md5后缀、html中资源地址切换和文件上传服务器及CDN。接下来依次介绍这几个常用的配置规则。

(1)静态资源压缩及文件名添加md5后缀，同时生成rev-manifest.json，可以在后面进行资源路径的替换：

const gulp = require('gulp');
const uglify = require('gulp-uglify');    //压缩js
const minifyCss = require('gulp-minify-css');  //- 压缩CSS为一行；
const rev = require('gulp-rev'); //- 对文件名加MD5后缀
const runSequence = require('run-sequence');//控制task顺序

gulp.task('build-js', function () {
    return gulp.src(['js/*.js'])
        //压缩js
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('dist/js/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/js'));

});

gulp.task('build-css', function () {
    return gulp.src(['css/*.css'])
        //压缩css
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('dist/css/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/css'));
});

gulp.task('build-images', function () {
    return gulp.src(['images/*.png','images/*.jpg','images/*.gif'])
        .pipe(rev())
        .pipe(gulp.dest('dist/images/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/images'));
});
gulp.task('build-static', function (callback) {
    runSequence(['build-js', 'build-css', 'build-images'],
        callback);
});

执行gulp build-static就能将静态资源进行压缩，生成的文件在dist目录下，同时生成添加md5后缀的文件列表，存储在dis/rev/目录下的rev-manifest.json里

(2)将html中的路径替换为压缩后的文件路径，同时对html进行压缩

const gulp = require('gulp');
const minifyCss = require('gulp-minify-css');  //- 压缩CSS为一行；
const revCollector = require('gulp-rev-collector');

gulp.task('build-html', function () {  
    return gulp.src(['dist/**/*.json', './*.html'])  
        .pipe(revCollector({  
            replaceReved: true,  
            dirReplacements: {}  
        }))  
        .pipe(minifyHTML({  
            empty: true,  
            spare: true  
        }))  
        .pipe(gulp.dest('dist/'));  
});

执行build-html，就能根据之前生成的rev-manifest.json中的文件列表，将html里的依赖文件路径替换成新路径。

(3)对资源路径进行替换，一般是上线时需要将本地路径替换为cdn路径

const gulp = require('gulp');
const replace = require('gulp-replace');

gulp.task('replace-html', function () {
    return gulp.src(['./*.html'])
        .pipe(replace('./', 'cdnpath'))  //这里比较吃正则，每个项目的替换正则都是不一样的
        .pipe(gulp.dest('./'));
});

(4)文件上传服务器

const gulp = require('gulp');
const scp = require('gulp-scp2');//上传文件到服务器

gulp.task('upload-dev', function() {
    return gulp.src('dist/**/*')
        .pipe(scp({
            host:'192.168.1.100',
            username: 'root',
            password: '*******',
            dest: '/home/tmp/'
        }))
        .on('error',function(err) {
            console.log(err);
        });

});

这是上传全部文件的，如果要上传指定目录下的文件，同时在目标路径下保持现有的路径，就要用到base参数

const gulp = require('gulp');
const scp = require('gulp-scp2');//上传文件到服务器

gulp.task('upload', function() {
    return gulp.src(['./*.html','./css/**/*','./js/**/*'],{base:'.'})
        .pipe(scp({
            host:'192.168.1.100',
            username: 'root',
            password: '',
            dest: '/home/tmp/'
        }))
        .on('error',function(err) {
            console.log(err);
        });
});

(5)上传文件到cdn

只看到了一篇七牛CDN的文件上传方法，公司用的是又拍云，尝试了gulp-ftp、gulp-sftp、gulp-upyun以及官方的nodejs sdk，都没办法上传成功，这个暂时留坑，以后有时间再填。

参考：

jsp下较完整的gulp实例：压缩、md5、上传cdn、路径替换

windows下Gulp入门详细教程
使用gulp构建打包工具