使用gulp在開發過程當中合理導出zip文件

最近一段時間一直在作桌面混合應用，跟以往作web端不一樣的是，沒法再經過在瀏覽器上輸入內部的域名來隨時跟蹤開發版本的情況了，只能經過打包代碼讓產品或領導隨時跟蹤進度。

 

這裏就涉及到一些問題了：

 

1，須要打包成zip文件便於傳輸

2，須要排除一些僅是開發中須要的文件，如node_modules，一些沒必要要的config等

 

而後，首當其衝gulp，關於gulp和grunt的比較，流式（stream）操做比較快之類的云云就很少廢話了。

 

一，生成zip文件

使用gulp-zip插件

首先是安裝

npm install gulp -g
npm install gulp gulp-zip --save-dev

這裏存在兩個問題：

1. 爲何要裝兩次gulp，一次全局一次本地？全局安裝是爲了隨時隨地能夠在命令行中使用gulp，命令行並不認識local安裝的gulp命令，本地安裝是爲了維護你當前的項目所依賴的gulp版本，且本地運行更快，固然若是你實在不爽兩地安裝或者到發佈環境再去全局安裝gulp顯得不少餘，你固然能夠這樣作，在項目根目錄下的package.json中這樣寫：

   {
       ...//此處省略100行
       "main": "src/js/index.js",
       "scripts": {
           "zip": "gulp zip"
       },
       ...//此處省略100行
   }    

   如此就能夠不用全局安裝gulp了，由於npm-script會自動到local的node_modules目錄中查找到gulp命令。

2. 爲何使用--save-dev而不用--save？是由於該插件僅爲開發所依賴，不爲使用所依賴，說白了就是隻有開發者才須要用這個插件，使用者是不須要的，因此使用--save-dev。

 

安裝完了以後，就開始編寫gulpfile.js（若是要使用es6語法，需更名爲gulpfile.babel.js，並需安裝babel，題外話，不展開）：

const gulp = require('gulp');
const zip = require('gulp-zip');
 
gulp.task('zip', function() {
    return gulp.src('**/*.*')
        .pipe(zip('test.zip'))
        .pipe(gulp.dest('export'));
});

gulp的使用問題不在這裏贅述。而後就能夠在根目錄下運行

gulp zip

或使用npm-script方式

npm run zip

而後就在export/下能看到你導出的test.zip文件，裏面包含了根目錄下的全部文件。

 

二，排除某些不須要的目錄和文件

一些常見的須要排除的目錄有node_modules，本地config等，gulp.src提供了強大的路徑匹配，咱們都知道src能接受數組來作多個匹配。

一開始你可能會這樣寫：

gulp.src(['!**/node_modules/**/*.*'，'!config/**/*.*']）

而後就出錯了：Error: Missing positive glob

原來反匹配在gulp.src中是不能夠寫在第一位的，第一項必定是正匹配，因而這樣寫：

gulp.src(['**/*.*','!**/node_modules/**/*.*'，'!config/**/*.*']）

一切大吉了，壓縮出來的文件不包含這些文件夾裏的東西了。也許你要問，就排除個文件夾，爲何不能直接寫**/node_modules？據我實驗下來，這邊過濾的只能是文件而不是一個路徑，若是你只寫路徑，是沒有效果的，必須匹配到該路徑下的全部文件。