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對各個瀏覽器兼容的前綴）等等功能，都跟以上作法相似。

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

No.一、run-sequence

Links:

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

No.二、browser-sync

Links:

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

No.三、del

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

做用：刪除文件/文件夾

No.四、gulp-coffee

Links:

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

No.五、coffee-script

Links:

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

No.六、gulp-nodemon

Links:

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

No.七、yargs

Links:

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

No.八、gulp-util

Links:

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

No.九、gulp-uglify

Links:

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

No.九、gulp-concat

Links:

做用：合併JS

No.十、gulp-sourcemaps

Links:

做用：處理JS時，生成SourceMap

No.十一、gulp-less

Links：

做用：將less預處理爲css

No.十二、gulp-sass

Links：

做用：將sass預處理爲css

No.1三、gulp-autoprefixer

Links：

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

No.1四、gulp-minify-css

Links：

做用：壓縮css。

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

Links：

 

來源：http://www.yidianzixun.com/n/0CUI9w1Z?s=8&appid=xiaomi