gulp自動化打包（下）

本次打包大致過程是checkout出想要打包的git版本（可以是tag，也可以是branchname），然後依次讀取專案中的html、less、js進行壓縮合併等操作，複製專案中所用到的第三方庫到輸出目錄（即plugins中的外掛程式，比如lodash、echarts等，前邊壓縮合併的js是自己寫的js），然後打zip包，傳送至目的地。

比如專案結構圖如下：

那麼這裡配置的輸入輸出路徑即為：

路徑以gulpfile.js為參考位置。

var path=
output:
}

如果不想要某檔案，比如不想去壓縮html1.html

var path=
}

『!』後面也可以跟某一型別檔案，或者直接指定某資料夾。

如果想打包git版本庫中的某乙個版本，或者某乙個分支，就需要用到git.checkout,但是在checkout之前，需要首先提交git版本，如果在git-bash下，會進行如下操作。

git add . git commit -m 「there are some comments」

在gulp中也一樣，我們需要編寫如下**

gulp.task('commit', function
());

commit的必要性是如果在本地工作空間修改，而沒有提交到本地倉庫的話，**有可能會丟。

上面這段**也可以不寫，不寫的話，就需要每次執行gulp指令碼之前，手動commit一下，總之，commit很重要。。。

接下來，就要checkout出相關版本了，因為不能確定打那個一版本的包，所有這裡可能需要用命令列手動去指定乙個版本，這裡就用到了上篇提到的乙個外掛程式，minimist,外掛程式具體就不在介紹了，這裡直接上checkout的**。

gulp.task('checkout',[commit], function
() );
})

其中argv.tag就是用了minimist獲取的，命令列我會這樣輸入。

gulp publish-- tagv1.0

.0

這種是指定tag的方式，還可以給gittag 變數加乙個預設值，即

gittag =argv.tag||defaultvalue;

這個defaultvalue可以寫死乙個版本，也可以在每次commit的時候生成乙個tag，gulp-git也有creat-tag的功能，這個方案我是沒有去嘗試的，理論上應該沒啥問題，沒有去用的主要原因是，感覺這樣打的tag有點多了，所以還是手動去給乙個tag。

到這裡，已經可以取出我們要打包的專案**了，下面開始進行具體打包工作。

壓縮合併，簡單來說，就是指定需要處理的資源，然後呼叫相關函式，輸出到某目錄，等待下一步處理。

這裡難度不大，直接上**：

壓縮html

gulp.task('html', function
() ;
return gulp.src(config.input.html)
.pipe(htmlmin(options))
.pipe(gulp.dest(config.output.dist))//gulp dest是輸出
});

壓縮合併js

gulp.task('js', function
(done)
)) .pipe
(uglify())
.pipe
(concat('index.min.js'))
.pipe
(gulp.dest(config.output.dist))
});

編譯壓縮合併less

gulp.task('less', function () );

複製第三方外掛程式

gulp.task('copy', function
(done) );

正常情況進行過上面4步操作最後，會得到這樣的結果：

經過合併壓縮等操作之後，專案會自動生成dist目錄，dist目錄下即為打包生成的各種檔案，接下來的目標是將dist目錄下的所有檔案打成乙個zip包，**如下：

gulp.task('zip_new', function
() );

moment是乙個獲取時間的外掛程式，可以給打的包乙個時間來標記，這個加不加都無所謂，zip方法裡面就是zip包的名稱，隨意命名。

將zip包打好之後便可以傳送zip包到某伺服器了，**如下：

gulp.task('ftp', function
() ));
});

至這裡，打包就全部完成了，下面要做的就是把他們連起來，這裡用到上篇提到的外掛程式，run-sequence,外掛程式用法如下：

gulp.task('publish', function
(callback) );

這裡有兩點需要注意：

1.run-sequence裡面的任務，按順序執行（方括號裡面4個任務，算作乙個任務），而且前乙個跑完才會跑後乙個，方括號裡的是非同步的，即不一定哪個先完成。

2.要想達到第一點裡面的同步執行（乙個任務完成才開始下乙個），一定要保證前面的所有任務，即除了ftp任務，其餘的方法一定要是return出來的，即：

正確寫法：

gulp.task('js', function
(done)
)) .pipe
(uglify())
.pipe
(concat('index.min.js'))
.pipe
(gulp.dest(config.output.dist))
});

錯誤寫法：

gulp.task('js', function
(done)
)) .pipe
(uglify())
.pipe
(concat('index.min.js'))
.pipe
(gulp.dest(config.output.dist))
});

前邊都要這樣寫，最後一項不加return，在本例中，即ftp的方法不用返回。

寫到這裡，還有乙個問題，就是沒有對資料夾進行清理，這也是比較重要的，在每一次開始打包工作之前，我們需要清理dist目錄，以保證下一次打包不會被上一次打包的檔案「汙染」。這裡用到gulp-del的外掛程式，**如下：

gulp.task('clean',function
())

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

gulp.task('publish', function
(callback) );

流程圖：

gulp自動化打包（下）

gulp不生成打包檔案 gulp自動化打包（下）

Gulp 自動化構建

xcode自動化打包

gulp自動化打包（下）

gulp不生成打包檔案 gulp自動化打包（下）

Gulp 自動化構建

xcode自動化打包

相關推薦