摘要：自動化打包上文章概述本文分為上下兩篇，上篇主要介紹一些常用的插件也是此次打包主要用的插件，而下篇主要以一個項目為例，從本地出合適的版本，壓縮合并到最后打成包，發送至指定目錄，做一個全面的演示。

本文分為上下兩篇，上篇主要介紹一些常用的gulp插件（也是此次打包主要用的gulp插件），而下篇主要以一個demo項目為例，從本地checkout出合適的git版本，壓縮、合并、到最后打成zip包，發送至指定目錄，做一個全面的演示。
流程預覽：

首先，有一個類似于這樣的項目結構

圖中主要演示項目中大概會有的幾種文件類型，fonts(ttf,svg)，image(jpg,png),js,less(sass),實際項目會復雜得多，開始一個項目的時候，可以直接從git上拿一個angular-seed(webpack-seed)改。

開始玩gulp之前，要確定自己有nodejs的環境，沒有的話，先去弄個nodejs,這個比較簡單，直接在https://nodejs.org/en/，下載一個對應開發環境的nodejs，然后一路next，路徑默認就好，window下自定義了路徑后，就不是全局的了，需要自己再配環境變量，圖省事的話，就一路next到finish。

ok,安裝好nodejs之后，在項目的src目錄下（與index.html的同級目錄）建立一個package.json文件與gulpfile.js（這個名字要對，不然命令行識別不了，項目中有時建立兩個gulp的js文件，如果兩個都含有同一任務，不特殊說明的話，命令行只執行文件名為gulpfile.js的任務），在命令行輸入
npm install gulp --save-dev（之前沒有安裝過gulp的話，執行npm install gulp -g --save-dev）指令，
"--save-dev"表示在安裝gulp之后，將安裝的信息保存在package.json文件，以便之后利用package.json文件去install相關插件（多人開發尤其要注意保存安裝信息），創建gulp成功后，目錄結構變為

之后所有的gulp插件都以此方式安裝，即npm install xx --save-dev

按照實際的打包順序， 我依次會介紹gulp-git、gulp-htmlmin、gulp-uglify、gulp-concat、gulp-ng-annotate（如果不是angular框架不需要）、gulp-less、gulp-minify-css、minimist、del、gulp-zip、gulp-ftp、run-sequence

gulp-git主要的作用是通過gulp腳本，來執行一些git的操作,gulp-git插件基本上可以完成所有常用的git操作，比如add、commit、push等等，還可以查看git-log，十分方便，用法也非常簡單，比如下面是一段獲取git倉庫中tag為v1.0.0的代碼(也可以checkout分支名)：

var git = require("gulp-git")；
gulp.task("checkout", function () {
  git.checkout("v1.0.0", function (err) {
    if (err) throw err;
  });
})

詳細的gulp-git使用方法，請參照https://github.com/stevelacy/...。

就是一個壓縮html的插件，沒什么特別要講的，這邊也直接拿網上的一個常用配置來演示。

var htmlmin = require("gulp-htmlmin");
gulp.task("testHtmlmin", function () {
    var options = {
        removeComments: true,//清除HTML注釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值  ==> 
        removeEmptyAttributes: true,//刪除所有空格作屬性值  ==> 
        removeScriptTypeAttributes: true,//刪除
指明lm-library的路徑。
比較方便的做法就是直接把lm-library一起都算進壓縮編譯的路徑當中，給import的less文件添加reference的屬性，這樣就不會對lm-library.less進行編譯了，也不會影響正常的less。
具體屬性參考：https://github.com/nfroidure/...。

minimist
這個插件，簡單來說就是從命令行當中提取參數。
開發中經常會遇到的應用場景是提供不同的參數，即動態參數，對應到gulp中，如果我們需要在命令行中手動輸入某個參數，此時就可以用minimist把他從命令行“提取”出來。
從minimist官方的文檔來看，exp為這樣：
$ node example/parse.js -a beep -b boop
{ _: [], a: "beep", b: "boop" }
文檔解釋也是一個‘-’為key,之后為value。但個人實際操作為兩個‘-’為key。可能原因是，我下的插件不是看的文檔的這個庫，或者英文太差看錯了。。。。。具體用的時候要自己注意了。
具體代碼為：
var argv = require("minimist")(process.argv.slice(2));
gulp.task("checkout", function () {
 var gitTag = argv.tag;
  git.checkout(gitTag, function (err) {
    if (err) throw err;
  });
})
cmd中輸入
gulp checkout --tag v1.0.0
此時，gitTag就會被賦值為v1.0.0。
參考文檔為：https://github.com/substack/m...。
gulp-del
刪除目標目錄，目標文件，演示var del=require("gulp-del")
gulp.task("clean",function(){
  return del(config.dist.basePath);
})易理解，就不詳細介紹了。
gulp-zip
將src中的各種文件，打成一個zip包，演示代碼：
var zip = require("gulp-zip");
gulp.task("zip", ()  {
         gulp.src("src/*")
        .pipe(zip("zipName.zip"))
        .pipe(gulp.dest("dist"));
});
gulp-ftp
將目標文件，發送至FTP服務器，這邊有5個參數是必填的，分別為：
host:服務器地址(必須)
port：服務器端口(必須)
user：ftp賬戶(必須) // 如果FTP沒有訪問限制，可以不填
pass：ftp賬戶密碼(必須)// 如果FTP沒有訪問限制，可以不填
remote: 對應的服務器文件地址(必須)
logger：輸出文件列表名稱,默認在項目根目錄生成文件(可選,默認：logger.txt)
froot: 提單文件前綴(可選，默認：/usr/local/imgcache/htdocs)
exp：體驗環境地址(可選，默認null)
pro：正式環境地址(可選，默認null)
參考地址：https://github.com/sindresorh...。
演示代碼：
gulp.task("ftp", function () {
  return gulp.src("dist_zip/*")
    .pipe(ftp({
      host: "testHost",
      port: 21,
      //user: "anonymous",
      //pass:null,
      remotePath: "path/"
    }));
});
run-sequence
一個串行方式跑gulp任務的插件，在實際場景中，不允許我們同時跑很多任務，因為任務之間往往是相互依賴的，此時run-sequence就是一個很好的選擇，他可以讓多個任務按照寫入順序執行，同時可以控制哪些任務并行跑，哪些按照順序跑。
參考代碼：
 var runSequence = require("run-sequence")；
gulp.task("publish", function (callback) {
  runSequence("clean",["html", "js","less", "copy"],"zip_new",callback);
});
比如上述代碼，執行順序為1、"clean"。2、["html", "js","less", "copy"]。3、"zip_new"。
當然也可以在gulp中使用依賴注入的方法。
比如：
gulp.task("two", ["one"], function() {
    //任務two,會在任務one結束之后執行
});
但個人還是更喜歡，用run-sequence因為一旦依賴項變多之后，普通的注入，相互之間依賴過后，可讀性就會變差，而sequence會讓代碼看起來更優雅，寫起來也更簡單。
上篇小結
本文上篇主要講了gulp的安裝，以及常用的插件的介紹，gulp插件超級多。。本文介紹的這些，主要是下篇實際用到的，下篇會使用上述介紹的所有插件，來進行一次較完整的打包，ok，上篇作為鋪墊就到這里。
這里是下篇傳送門。