本次打包大致過程是checkout出想要打包的git版本(可以是tag,也可以是branchname),然後依次讀取專案中的html、less、js進行壓縮合併等操作,複製專案中所用到的第三方庫到輸出目錄(即plugins中的外掛程式,比如lodash、echarts等,前邊壓縮合併的js是自己寫的js),然後打zip包,傳送至目的地。
比如專案結構圖如下:
那麼這裡配置的輸入輸出路徑即為:
路徑以gulpfile.js為參考位置。
如果不想要某檔案,比如不想去壓縮html1.htmlvar path=
output:
}
『!』後面也可以跟某一型別檔案,或者直接指定某資料夾。var path=
}
如果想打包git版本庫中的某乙個版本,或者某乙個分支,就需要用到git.checkout,但是在checkout之前,需要首先提交git版本,如果在git-bash下,會進行如下操作。
在gulp中也一樣,我們需要編寫如下**git add .
git commit -m 「there are
some comments」
commit的必要性是如果在本地工作空間修改,而沒有提交到本地倉庫的話,**有可能會丟。gulp.task('commit', function
());
上面這段**也可以不寫,不寫的話,就需要每次執行gulp指令碼之前,手動commit一下,總之,commit很重要。。。
接下來,就要checkout出相關版本了,因為不能確定打那個一版本的包,所有這裡可能需要用命令列手動去指定乙個版本,這裡就用到了上篇提到的乙個外掛程式,minimist,外掛程式具體就不在介紹了,這裡直接上checkout的**。
其中argv.tag就是用了minimist獲取的,命令列我會這樣輸入。gulp.task('checkout',[commit], function
() );
})
這種是指定tag的方式,還可以給gittag 變數加乙個預設值,即gulp
publish--
tagv1.0
.0
gittag =argv.tag||defaultvalue;
這個defaultvalue可以寫死乙個版本,也可以在每次commit的時候生成乙個tag,gulp-git也有creat-tag的功能,這個方案我是沒有去嘗試的,理論上應該沒啥問題,沒有去用的主要原因是,感覺這樣打的tag有點多了,所以還是手動去給乙個tag。
到這裡,已經可以取出我們要打包的專案**了,下面開始進行具體打包工作。
壓縮合併,簡單來說,就是指定需要處理的資源,然後呼叫相關函式,輸出到某目錄,等待下一步處理。
這裡難度不大,直接上**:
壓縮html
壓縮合併jsgulp.task('html', function
() ;
return gulp.src(config.input.html)
.pipe(htmlmin(options))
.pipe(gulp.dest(config.output.dist))//gulp dest是輸出
});
編譯壓縮合併lessgulp.task('js', function
(done)
)) .pipe
(uglify())
.pipe
(concat('index.min.js'))
.pipe
(gulp.dest(config.output.dist))
});
gulp.task('less', function () );
複製第三方外掛程式
正常情況進行過上面4步操作最後,會得到這樣的結果:gulp.task('copy', function
(done) );
經過合併壓縮等操作之後,專案會自動生成dist目錄,dist目錄下即為打包生成的各種檔案,接下來的目標是將dist目錄下的所有檔案打成乙個zip包,**如下:
moment是乙個獲取時間的外掛程式,可以給打的包乙個時間來標記,這個加不加都無所謂,zip方法裡面就是zip包的名稱,隨意命名。gulp.task('zip_new', function
() );
將zip包打好之後便可以傳送zip包到某伺服器了,**如下:
至這裡,打包就全部完成了,下面要做的就是把他們連起來,這裡用到上篇提到的外掛程式,run-sequence,外掛程式用法如下:gulp.task('ftp', function
() ));
});
這裡有兩點需要注意: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))
});
前邊都要這樣寫,最後一項不加return,在本例中,即ftp的方法不用返回。gulp.task('js', function
(done)
)) .pipe
(uglify())
.pipe
(concat('index.min.js'))
.pipe
(gulp.dest(config.output.dist))
});
寫到這裡,還有乙個問題,就是沒有對資料夾進行清理,這也是比較重要的,在每一次開始打包工作之前,我們需要清理dist目錄,以保證下一次打包不會被上一次打包的檔案「汙染」。這裡用到gulp-del的外掛程式,**如下:
經過以上,乙個完整的run-sequence如下:gulp.task('clean',function
())
流程圖:gulp.task('publish', function
(callback) );
gulp不生成打包檔案 gulp自動化打包(下)
打包流程簡介 本次打包大致過程是checkout出想要打包的git版本 可以是tag,也可以是branchname 然後依次讀取專案中的html less js進行壓縮合併等操作,複製專案中所用到的第三方庫到輸出目錄 即plugins中的外掛程式,比如lodash echarts等,前邊壓縮合併的j...
Gulp 自動化構建
use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化,而且在開發過程中能夠通過配置自動完成很多重複的任務,讓我們可以...
xcode自動化打包
xcode自動化打包 1 自動化打包 需要將紅色部分重新修改為自己的目錄 cd users jiao documents ios git xiaomeidianpu buildday date y m d profile buildconfiguration qa buildpath users j...