打包流程简介

本次打包大抵历程是checkout出想要打包的git版本（可所以tag，也可所以branchName），然后顺次读取项目中的html、less、js举行紧缩兼并等操纵，复制项目中所用到的第三方库到输出目次（即plugins中的插件，比方lodash、echarts等，前边紧缩兼并的js是本身写的js），然后打zip包，发送至目的地。

最先编写gulp剧本

声明gulp插件

在gulp剧本中声明下载的gulp插件，即：

 var  gulp = require('gulp'),
      concat = require('gulp-concat'),
      less = require('gulp-less'),
      minifyCss = require('gulp-minify-css'),
      minify = require('gulp-minify'),
      zip = require('gulp-zip'),
      moment = require("moment"),
      ftp = require('gulp-ftp'),
      git = require('gulp-git'),
      runSequence = require('run-sequence'),
      argv = require('minimist')(process.argv.slice(2)),
      del = require('del'),
      uglify = require('gulp-uglify'),
      htmlmin = require('gulp-htmlmin'),
      ngAnnotate = require('gulp-ng-annotate');

一致设置途径

比方项目结构图以下：

那末这里设置的输入输出途径即为：
途径以gulpfile.js为参考位置。

var path={
input:{
    html:['src/app/*.html'],
    js:['src/app/js/*.js'],
    less:['src/app/less/*.less'],
    image:['src/app/image/*'],
    fonts:['src/app/fonts/*'],
    plugins:['src/plugins/**/*']
}
output:{
    dist:'dist',
    plugins:'dist/plugins'
}
}

假如不想要某文件，比方不想去紧缩html1.html

var path={
input:{
    html:['src/app/*.html','!src/app/html1.html'],
}
}

‘!’背面也能够跟某一范例文件，或许直接指定某文件夹。

运用gulp-git

假如想打包git版本库中的某一个版本，或许某一个分支，就须要用到git.checkout,但是在checkout之前，须要起首提交git版本，假如在git-bash下，会举行以下操纵。

git add .
git commit -m “there are some comments”

在gulp中也一样，我们须要编写以下代码

gulp.task('commit', function(){
  return gulp.src('./demo/**/*')
    .pipe(git.add())
    .pipe(git.commit());
});

commit的必要性是假如在当地事情空间修正，而没有提交到当地堆栈的话，代码有能够会丢。
上面这段代码也能够不写，不写的话，就须要每次实行gulp剧本之前，手动commit一下，总之，commit很重要。。。

接下来，就要checkout出相干版本了，由于不能肯定打谁人一版本的包，一切这里能够须要用命令行手动去指定一个版本，这里就用到了上篇提到的一个插件，minimist,插件详细就不在引见了，这里直接上checkout的代码。

gulp.task('checkout',[commit], function () {
  gitTag = argv.tag;
  git.checkout(gitTag, function (err) {
    if (err) throw err;
  });
})

个中argv.tag就是用了minimist猎取的，命令行我会如许输入。

gulp publish --tag v1.0.0

这类是指定tag的体式格局，还能够给gitTag 变量加一个默认值，即

 gitTag = argv.tag||defaultValue;

这个defaultValue能够写死一个版本，也能够在每次commit的时刻天生一个tag，gulp-git也有creat-tag的功用，这个计划我是没有去尝试的，理论上应当没啥题目，没有去用的重要原因是，觉得如许打的tag有点多了，所以照样手动去给一个tag。

到这里，已能够掏出我们要打包的项目代码了，下面最先举行详细打包事情。

紧缩兼并

紧缩兼并，简朴来讲，就是指定须要处置惩罚的资本，然后挪用相干函数，输出到某目次，守候下一步处置惩罚。
这里难度不大，直接上代码：
紧缩html

gulp.task('html', function () {
  var options = {
    removeComments: true,
    collapseWhitespace: true,
    collapseBooleanAttributes: true,
    removeEmptyAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    minifyJS: true,
    minifyCSS: true
  };
  return gulp.src(config.input.html)
    .pipe(htmlmin(options))
    .pipe(gulp.dest(config.output.dist))//gulp dest是输出
});

紧缩兼并JS

gulp.task('js', function (done) {
  return gulp.src(config.input.js)
    .pipe(ngAnnotate({single_quotes: true}))
    .pipe(uglify())
    .pipe(concat('index.min.js'))
    .pipe(gulp.dest(config.output.dist))
});

编译紧缩兼并less

gulp.task('less', function () {
  return gulp.src(config.input.less)
    .pipe(less())
    .pipe(minifyCss())
    .pipe(concat('index.min.css'))
    .pipe(gulp.dest(config.output.dist));
});

复制第三方插件

gulp.task('copy', function (done) {
 return gulp.src(config.input.plugins)
    .pipe(gulp.dest(config.dist.plugins);
});

一般状况举行过上面4步操纵末了，会获得如许的效果：

打zip包

经由兼并紧缩等操纵以后，项目会自动天生dist目次，dist目次下即为打包天生的种种文件，接下来的目的是将dist目次下的一切文件打成一个zip包，代码以下：

gulp.task('zip_new', function () {
  var timeStamp = moment().format("YYYY-MM-D_HH-mm-ss_");
  return gulp.src(config.input.zip)
    .pipe(zip("dist_" + timeStamp + ".zip"))
    .pipe(gulp.dest(config.output.dist));
});

moment是一个猎取时候的插件，能够给打的包一个时候来标记，这个加不加都无所谓，zip要领内里就是zip包的称号，随便定名。

发送至指定服务器

将zip包打好以后便能够发送zip包到某服务器了，代码以下：

gulp.task('ftp', function () {
 gulp.src("dist_zip/*")
    .pipe(ftp({
      host: 'someHost',
      port: 21,
      //user: 'anonymous',
      //pass:null,
      remotePath: "somePath/"
    }));
});

一键打包

至这里，打包就悉数完成了，下面要做的就是把他们连起来，这里用到上篇提到的插件，run-sequence,插件用法以下：

gulp.task('publish', function (callback) {
  runSequence(['html', 'js','less', 'copy'],'zip_new',ftp,callback);
});

这里有两点须要注重：
1.run-sequence内里的使命，按递次实行（方括号内里4个使命，算作一个使命），而且前一个跑完才会跑后一个，方括号里的是异步的，即不肯定哪一个先完成。
2.要想到达第一点内里的同步实行（一个使命完成才最先下一个），肯定要保证前面的一切使命，即除了ftp使命，其他的要领肯定如果return出来的，即：
<font color=#20B2AA size=4>准确写法：</font>

 gulp.task('js', function (done) {
  return gulp.src(config.input.js)
    .pipe(ngAnnotate({single_quotes: true}))
    .pipe(uglify())
    .pipe(concat('index.min.js'))
    .pipe(gulp.dest(config.output.dist))
});

<font color=#DC143C size=4>毛病写法：</font>

 gulp.task('js', function (done) {
  gulp.src(config.input.js)
    .pipe(ngAnnotate({single_quotes: true}))
    .pipe(uglify())
    .pipe(concat('index.min.js'))
    .pipe(gulp.dest(config.output.dist))
});

前边都要如许写，末了一项不加return，在本例中，即ftp的要领不必返回。

清算dist目次

写到这里，另有一个题目，就是没有对文件夹举行清算，这也是比较重要的，在每一次最先打包事情之前，我们须要清算dist目次，以保证下一次打包不会被上一次打包的文件“污染”。这里用到gulp-del的插件，代码以下：

gulp.task('clean',function(){
  return del(config.output.dist);
})

完全打包review

经由以上，一个完全的run-sequence以下：

gulp.task('publish', function (callback) {
  runSequence('clean','checkout',['html', 'js','less', 'copy'],'zip_new','ftp',callback);
});

流程图：