摘要：到這里，已經可以取出我們要打包的項目代碼了，下面開始進行具體打包工作。這里用到的插件，代碼如下完整打包經過以上，一個完整的如下流程圖

本次打包大致過程是checkout出想要打包的git版本（可以是tag，也可以是branchName），然后依次讀取項目中的html、less、js進行壓縮合并等操作，復制項目中所用到的第三方庫到輸出目錄（即plugins中的插件，比如lodash、echarts等，前邊壓縮合并的js是自己寫的js），然后打zip包，發送至目的地。

在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"],
}
}

"!"后面也可以跟某一類型文件，或者直接指定某文件夾。

如果想打包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步操作最后，會得到這樣的結果：

經過合并壓縮等操作之后，項目會自動生成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出來的，即：
正確寫法：

 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))
});

錯誤寫法：

 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目錄，以保證下一次打包不會被上一次打包的文件“污染”。這里用到gulp-del的插件，代碼如下：

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

經過以上，一個完整的run-sequence如下：

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

流程圖：