gulp前端自動化構建工具新手入門篇

好久沒有更新博文了。

通過了一次年前吐血的趕項目，終於在年後回血了。趁着有空，新學到了一個前端自動化構建工具－gulp。

如今咱們經過這3個問題來學習一下；

一、什麼是gulp?

二、爲何要用gulp?

三、怎麼用？

 

什麼是gulp

答：是一個前端自動化的構建工具，直白點說，若是沒有這個工具，咱們利用人工依舊能夠作到如下優勢，可是在項目逐漸龐大的時候，採用這個工具，能夠提高性能和效率。

 

爲何要用gulp?

答：

一、js和css屬於靜態文件，不少時候瀏覽器存在緩存機制，爲了不緩存帶來的誤會，能夠利用構建工具，給每個靜態文件添加一個版本號，這樣瀏覽器就會認爲是新的文件，就不存在緩存機制。

二、性能優化：文件合併，減小http請求；文件壓縮，減小文件體積，加快下載速度；

三、效率提高：自動添加CSS3的vendor前綴；代碼分析檢查改正；在使用MVC和MVVM的框架後，可在提交以前，使用gulp自動跑一遍單元測試； 

 

怎麼用？

一、首先，安裝gulp以前，先安裝nodejs環境，由於gulp是基於nodejs的前端構建工具

$ npm install --global gulp

二、而後，在開發項目上，安裝項目依賴（devDependencies）

$ npm install --save-dev gulp

三、繼續，在項目的根目錄下建立一個名爲：gulpfile.js的文件，用來配置gulp的相關task:

$ touch gulpfile.js

　　－－請打開gulpfile.js，輸入如下內容：

　　　　

var gulp = require('gulp');

　　這行命令告知node，先局部（node_modules）查找gulp包，找不到再去全局查找。找到以後就會賦值給gulp變量，而後咱們就可使用它了。

　　－－如何配置gulp任務：

gulp.task('task-name',funcion(){
    //Stuff here
});

　　這是gulp設置task的大概模版，'task－name'是你給任務起的名字，稍後在命令行執行gulp task－name，將任務執行。

寫個hello world，是這樣的

　　　

而後在命令行執行

$ gulp hello

運行結果：

 好的，已經成功運行出來了！大概任務就是這樣子，如今咱們來寫一個正式的gulp任務。

例如，編譯sass，任務代碼爲：

如圖：.src 是文件的源路徑；.pipe是任務運行的管道；.dest是任務結束以後的輸出路徑。

同時sass文件內容爲，下面那個分數沒有被計算出來：

好的，代碼寫完了，在命令行執行命令 $ gulp sass，如圖：

編譯後，你在css輸出的路徑那裏會看到生成了一個同名的.css文件，內容就是sass編譯完的結果爲：

gulp還有不少其它插件，例如：壓縮，合併，加vendor前綴（css3對各個瀏覽器兼容的前綴）等等功能，都跟以上作法相似。

補充：

一、*.scss ：*號匹配當前目錄任意文件，因此這裏的＊scss匹配當前目錄下全部scss文件。

二、**/*.scss:匹配當前目錄及其子目錄的全部scss文件。

三、！not-me.scss：！號移除匹配的文件，這裏將移除not-me.scss

四、*.+(scss|sass):+號後面會跟着圓括號，裏面的元素用｜分割，匹配多個選項，這裏將匹配scss和sass文件。

 

gulp的基本用法大概就是這樣，他還有不少其它插件，能夠方便開發，例如自動刷新，監聽事件之類的等等，下面就是經常使用插件的連接：

No.一、run-sequence

Links: https://www.npmjs.com/package/run-sequence

做用：讓gulp任務，能夠相互獨立，解除任務間的依賴，加強task複用

No.二、browser-sync

Links: http://www.browsersync.io/

做用：靜態文件服務器，同時也支持瀏覽器自動刷新

No.三、del

Links：https://www.npmjs.com/package/del

做用：刪除文件/文件夾

No.四、gulp-coffee

Links: https://github.com/wearefractal/gulp-coffee

做用：編譯coffee代碼爲Js代碼，使用coffeescript必備

No.五、coffee-script

Links: https://www.npmjs.com/package/coffee-script

做用：gulpfile默認採用js後綴，若是要使用gulpfile.coffee來編寫，那麼須要此模塊

No.六、gulp-nodemon

Links: https://www.npmjs.com/package/gulp-nodemon

做用：自動啓動/重啓你的node程序，開發node服務端程序必備

No.七、yargs

Links: https://www.npmjs.com/package/yargs

做用：用於獲取啓動參數，針對不一樣參數，切換任務執行過程時須要

No.八、gulp-util

Links: https://www.npmjs.com/package/gulp-util

做用：gulp經常使用的工具庫

No.九、gulp-uglify

Links: https://www.npmjs.com/package/gulp-uglify

做用：經過UglifyJS來壓縮JS文件

No.九、gulp-concat

Links: https://www.npmjs.com/package/gulp-concat

做用：合併JS

No.十、gulp-sourcemaps

Links: https://www.npmjs.com/package/gulp-sourcemaps

做用：處理JS時，生成SourceMap

No.十一、gulp-less

Links：https://www.npmjs.com/package/gulp-less

做用：將less預處理爲css

No.十二、gulp-sass

Links：https://www.npmjs.com/package/gulp-sass

做用：將sass預處理爲css

No.1三、gulp-autoprefixer

Links：https://www.npmjs.com/package/gulp-autoprefixer

做用：使用Autoprefixer來補全瀏覽器兼容的css。

No.1四、gulp-minify-css

Links：https://www.npmjs.com/package/gulp-minify-css

做用：壓縮css。

No.1五、connect-history-api-fallback

Links：https://www.npmjs.com/package/connect-history-api-fallback

做用：開發angular應用必須，用於支持HTML5 history API.

 

 

相關連接：

gulp官方網站：http://gulpjs.com/

gulp中文網站：http://www.gulpjs.com.cn/docs/

參考資料連接：

http://www.w3ctrain.com/2015/12/22/gulp-for-beginners/

http://www.mamicode.com/info-detail-517085.html