最近一段時間一直在做桌面混合應用,跟以往做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
這里存在兩個問題:
- 為什么要裝兩次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命令。
- 為什么使用--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?據我實驗下來,這邊過濾的只能是文件而不是一個路徑,如果你只寫路徑,是沒有效果的,必須匹配到該路徑下的所有文件。
