gulp前端自動化構建工具的應用
1. 引言:
實際前端開發不再僅僅是靜態頁面的開發了,豐富的前端技術讓前端的**邏輯越來越複雜,
模組化開發和各類框架也增加了在生產環境中部署開發環境**的難度,這種情況下,前端自動化構建在前端開發中尤為重要。
我們會遇到下面的問題:
a. 每次修改了html、js、css等檔案,都需要手動重新整理瀏覽器,能不能修改了讓瀏覽器自動重新整理呢 ?
b. 在發布專案的時候,需要將前端資源進行合併、壓縮,儘量減少http請求,手動去完成合併壓縮不僅繁瑣,還容易出錯,有什麼技術可以自動地執行這些操作,解放我們的雙手呢?
2. gulp - 基於流的自動化構建工具
gulp的出現完美解決了引言中的問題,再利用node.js的威力,我們就可以快速構建專案。
gulp的api很少,上手很快,簡單介紹下:
a. gulp.src()
input輸入,檔案的讀取操作;從作業系統中讀取乙個或者多個檔案,讀取完的檔案由 gulp 載入到記憶體中,等待繼續的操作
b. gulp.dest()
output 輸出,也即檔案的寫入操作
c. gulp.task(name,[,deps],fn)
第乙個引數是要執行任務的名字,第二個引數是執行該任務需要依賴的任務,第三個引數定義了所要執行的操作
d. gulp.watch()
監視檔案,檔案發生改動時執行定義的操作
其中,還有乙個 pipe() 可以理解成管道、下一步要執行的操作的意思。
如下圖:執行乙個"server"任務,監控src目錄下的html檔案,如果發生了變化,執行reload任務,reload任務是將 src 目錄下的所有html檔案複製到build目錄下。
3. gulp的外掛程式:
gulp有很多高質量的外掛程式,正是通過這些外掛程式,才能完成各種任務,下面列了一些常見的外掛程式。
gulp-concat:css檔案合併
gulp-clean-css:css檔案壓縮
gulp-babel:js es6語法轉es5
gulp-uglify:js 壓縮
gulp-rename:檔案改名
gulp-imagemin:壓縮
browser-sync:瀏覽器同步測試工具
4. 關於gulpfile.js
在專案根目錄下,我們需要新建乙個命名為 gulpfile.js 的js檔案,我們的任務都寫在這裡
編寫 gulpfile.js注意事項:
路徑的統一配置:方便日後根據實際專案的目錄名進行更改。
5. **部分
**部分的思路就是將開發環境和生成環境完全分開:
開發環境:啟動開發環境的伺服器,修改了任何乙個檔案,伺服器自動同步效果;
生產環境:部署開發環境的**,並對資源檔案合併、壓縮。
5.1. 開發環境**
5..2 生產環境**
6. 使用方法
a. 安裝node環境
b. 拷貝package.json、gulpfile.js 檔案到自己專案的根目錄,package.json裡就是安裝外掛程式的依賴
命令列 npm install 安裝所有依賴
c. 開發階段,命令列執行 gulp dev,開啟檔案實時監控的任務,檔案的更改後自動重新整理瀏覽器頁面
d. 生產環境,命令列執行 gulp product 執行css、js、的合併壓縮任務
7. 其他好用的外掛程式
gulp還有一些其他好用的外掛程式,可以根據實際情況自行配置哦
gulp-css-spriter:雪碧圖自動合成
gulp-base64:轉成base64的
gulp-rev:版本控制
gulp-notify:專案通知
......
8. 總結
前端自動化構建工具能讓我們更高效的工作,所謂磨刀不誤砍柴功嘛。gulp還有很多實用高效的外掛程式,需要我們在實踐中探索,結合專案需求進行選擇。
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務,例如 網頁自動重新整理 css預處理 檢測 壓縮 等,只需要簡單的命令就能全部完成。使用它可以簡化工作,提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受,更為簡單...
自動化構建工具gulp入門(二)
外掛程式官網 gulp sass 開發環境下書寫 sass 或 less 函式式的書寫自己的樣式是一種很好的開發體驗,但我們最終仍需將sass或less編譯轉化為css檔案引入。gulp sass可以幫助我們完成這部分的工作。npm install gulp sass外掛程式安裝後在gulpfile...
gulp前端自動化構建工具(一) 工具介紹和使用
功能概要 本工具基礎gulp自動化工具構建,可適用於整個前端開發時間線,使用時較簡單,在配置完後輸入自定義命令即可使用本工具。功能如下 開發環節 構建環節 支援命令選擇requriejs amd seajs cmd webpack 模式之一進行js打包 構建時可選擇性構成普通版本或壓縮版本 md5戳...