使用gulp編寫經常使用自動化構建任務

前端開發過程當中使用自動化構建工具大大提升了咱們的工做效率。gulp就是其中一款十分優異的自動化構建工具，具備清晰的API、豐富的插件。剛接觸前端開發時我就享受了gulp帶來的便利。

之前的頁面開發主要工做就是編寫html、css、js文件，後來less、es6和各類前端框架的出現大大減小開發代碼量，要使用它們就必須先編譯，從而逐漸分化出開發流程：

• 寫業務代碼（例如 es6，less，jsx 等）
• 編譯成瀏覽器兼容的（js，css，html）
• 瀏覽器自動刷新
• 上傳到服務器發佈

自動化構建工具就是能讓咱們專心寫業務代碼，其餘的事由工具自動完成。

gulp中文網

1、gulp + node.js

yarn add gulp gulp-load-plugins ejs minimist --dev
複製代碼

1. 全局和做爲開發依賴安裝gulp
2. 插件較多時使用gulp-load-plugins，避免逐個引入插件
3. 使用fs-extra擴展原生fs模塊
4. 使用ejs編譯模板生成html文件
5. 使用minimist 獲取gulp命令的參數

gulp的任務實際上就是執行一系列操做，這些操做放在一個函數裏，以下：

gulp.task('taskname', function() {
  // do somethings
});
複製代碼

利用node命令能夠執行node.js程序，但沒法清楚表達程序的意義。而經過gulp任務的概念能夠從邏輯上更好地管理node.js程序。作法是gulp引用封裝好的js模塊，再定義gulp task調用模塊裏的方法。

利用這種思路能夠實現一個自動建立項目目錄和根據模板生成新頁面的腳手架。

2、gulp + html

yarn add gulp-htmlmin gulp-html-replace gulp-rev gulp-rev-collector --dev
複製代碼

1. 使用gulp-htmlmin壓縮html，去除頁面空格、註釋，刪除多餘屬性等操做。壓縮頁面內聯javascript、內聯css。
2. 使用gulp-rev-collector用md5命名後的文件名替換原文件名，配合gulp-rev使用，它會給文件名加上md5並生成映射文件。從新發布時能夠去除舊文件的緩存或替換成CDN地址。
3. 使用gulp-html-replace替換html文檔中一部分。

3、gulp + less

yarn add gulp-less gulp-autoprefixer gulp-clean-css gulp-concat-css --dev
複製代碼

1. Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了變量、混合（mixin）、函數等功能，最重要的是支持嵌套規則讓 CSS 更易維護。less在網頁上使用須要先編譯成css，gulp-less插件正好實現這一功能。
2. 使用gulp-autoprefixer根據設置瀏覽器版本自動處理瀏覽器前綴。
3. 使用 gulp-clean-css壓縮css文件
4. 使用gulp-concat-css合併多個css文件

4、gulp + ES6

yarn add gulp-babel babel-core babel-preset-es2015 gulp-uglify gulp-concat --dev
複製代碼

1. 使用es6能夠提升工做效率，webpack的babel-loader如今已經普及了，而gulp 也有相應的插件gulp-babel將咱們寫的es6代碼經過babel編譯，需配置.babelrc。
2. 使用gulp-uglify壓縮javascript文件
3. 使用gulp-concat合併多個js文件

5、gulp + browserSync

yarn add browser-sync --dev
複製代碼

• 使用browser-sync在構建網站時保持多個瀏覽器和設備的同步,配合gulp watch 修改後自動刷新。

6、其餘插件

1. 使用 gulp-imagemin壓縮圖片，效果不理想可以使用tinyjpg

2. 使用gulp-rename對文件重命名再輸出。

3. 使用gulp-delete-file刪除文件

4. 使用gulp-clean刪除文件夾

5. 使用gulp-ssh上傳文件到服務器（不多應用）

7、gulp 與 webpack

接觸過gulp 和 webpack 以後會感受到到二者有不少方面的不一樣：

1. 在難度方面gulp比較容易理解和使用，gulp自己的api很少它只是爲插件搭建一個平臺，而後真正完成任務的是各類gulp插件，插件資源也比較豐富基本上能夠實現對付常規的前端開發流程中的任務. webpack有不少新概念和api，在入口、輸出、加載器、插件下又有各類配置選項，所以須要認真對照官方文檔結合項目學習。
2. 在定位方面gulp是基於任務的，如針對編譯、壓縮、合併、發佈等前端開發流程各個擊破，使用相關的插件使這些流程自動化運行。webpack核心概念是模塊，從入口文件出發將各類資源打包成js模塊，模塊之間造成清晰的依賴關係。

在實際開發中用到webpack的機會愈來愈大，緣由是響應式的前端框架語言（React,Vue，Angular）已經被普遍使用了，這些框架推薦的腳手架工具默認選擇了webpack來更好地編譯使用到的技術 （.jsx,.vue）,不管是移動端應用仍是中後臺管理系統頁面開發都有了成熟的實踐和各類開源庫支持。

gulp 的使用場景剩下的就是傳統的JS/JQuery開發,這種開發方式沒有特殊的文件須要編譯（.jsx,.vue）,能夠專一於開發流程設計相應的gulp任務來提升開發的效率。前端運營頁面開發就是場景之一,功能簡單、迭代快速、DOM操做複雜，使用gulp成爲更好的選擇。還有一個場景就是小程序開發，在開發者工具上不能知足咱們開發的技術需求，複雜的小程序開發能夠用gulp補全流程任務，如 編譯less、加md5碼、替換資源路徑等。

8、使用gulp構建多頁應用實例

詳見倉庫