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

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

首先，有一個(gè)類似于這樣的項(xiàng)目結(jié)構(gòu)

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

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

ok,安裝好nodejs之后，在項(xiàng)目的src目錄下（與index.html的同級(jí)目錄）建立一個(gè)package.json文件與gulpfile.js（這個(gè)名字要對(duì)，不然命令行識(shí)別不了，項(xiàng)目中有時(shí)建立兩個(gè)gulp的js文件，如果兩個(gè)都含有同一任務(wù)，不特殊說明的話，命令行只執(zhí)行文件名為gulpfile.js的任務(wù)），在命令行輸入
npm install gulp --save-dev（之前沒有安裝過gulp的話，執(zhí)行npm install gulp -g --save-dev）指令，
"--save-dev"表示在安裝gulp之后，將安裝的信息保存在package.json文件，以便之后利用package.json文件去install相關(guān)插件（多人開發(fā)尤其要注意保存安裝信息），創(chuàng)建gulp成功后，目錄結(jié)構(gòu)變?yōu)?br>
之后所有的gulp插件都以此方式安裝，即npm install xx --save-dev

按照實(shí)際的打包順序， 我依次會(huì)介紹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腳本，來執(zhí)行一些git的操作,gulp-git插件基本上可以完成所有常用的git操作，比如add、commit、push等等，還可以查看git-log，十分方便，用法也非常簡(jiǎn)單，比如下面是一段獲取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;
  });
})

詳細(xì)的gulp-git使用方法，請(qǐng)參照https://github.com/stevelacy/...。

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

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一起都算進(jìn)壓縮編譯的路徑當(dāng)中，給import的less文件添加reference的屬性，這樣就不會(huì)對(duì)lm-library.less進(jìn)行編譯了，也不會(huì)影響正常的less。
具體屬性參考：https://github.com/nfroidure/...。

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