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

很久沒有更新博文了。

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

現在我們通過這3個問題來學習一下；

1、什么是gulp?

2、為什么要用gulp?

3、怎么用？

 

什么是gulp

答：是一個前端自動化的構建工具，直白點說，如果沒有這個工具，我們利用人工依舊可以做到以下優點，但是在項目逐漸龐大的時候，采用這個工具，可以提升性能和效率。

 

為什么要用gulp?

答：

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

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

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

 

怎么用？

1、首先，安裝gulp之前，先安裝nodejs環境，因為gulp是基於nodejs的前端構建工具

$ npm install --global gulp

2、然后，在開發項目上，安裝項目依賴（devDependencies）

$ npm install --save-dev gulp

3、繼續，在項目的根目錄下創建一個名為：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對各個瀏覽器兼容的前綴）等等功能，都跟以上做法類似。

補充：

1、*.scss ：*號匹配當前目錄任意文件，所以這里的＊scss匹配當前目錄下所有scss文件。

2、**/*.scss:匹配當前目錄及其子目錄的所有scss文件。

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

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

 

gulp的基本用法大概就是這樣，他還有很多其它插件，可以方便開發，例如自動刷新，監聽事件之類的等等，下面就是常用插件的鏈接：

No.1、run-sequence

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

作用：讓gulp任務，可以相互獨立，解除任務間的依賴，增強task復用

No.2、browser-sync

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

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

No.3、del

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

作用：刪除文件/文件夾

No.4、gulp-coffee

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

作用：編譯coffee代碼為Js代碼，使用coffeescript必備

No.5、coffee-script

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

作用：gulpfile默認采用js后綴，如果要使用gulpfile.coffee來編寫，那么需要此模塊

No.6、gulp-nodemon

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

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

No.7、yargs

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

作用：用於獲取啟動參數，針對不同參數，切換任務執行過程時需要

No.8、gulp-util

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

作用：gulp常用的工具庫

No.9、gulp-uglify

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

作用：通過UglifyJS來壓縮JS文件

No.9、gulp-concat

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

作用：合並JS

No.10、gulp-sourcemaps

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

作用：處理JS時，生成SourceMap

No.11、gulp-less

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

作用：將less預處理為css

No.12、gulp-sass

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

作用：將sass預處理為css

No.13、gulp-autoprefixer

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

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

No.14、gulp-minify-css

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

作用：壓縮css。

No.15、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