前端自動化構建工具gulp的使用總結

前端自動化構建工具gulp的使用總結

博主最近偶的空閒，在此對gulp的使用作一個總結，讓小夥伴知道如何合理的使用gulp以及gulp的使用技巧。

談到gulp，有人可能就會想到另一個構建工具grunt，那麼 博主就要誇你一句：油啊熱癟死他。

那麼grunt和gulp有什麼異同點呢？

1.易於使用：採用代碼優於配置策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。

2.高效：經過利用Node.js強大的流，不須要往磁盤寫中間文件，能夠更快地完成構建。

3.高質量：Gulp嚴格的插件指導方針，確保插件簡單而且按你指望的方式工做。

4.易於學習：經過把API降到最少，你能在很短的時間內學會Gulp。構建工做就像你設想的同樣：是一系列流管道

5.易用 Gulp相比Grunt更簡潔，並且遵循代碼優於配置策略，維護Gulp更像是寫代碼。高效 Gulp相比Grunt更有設計感，核心設計基於Unix流的概念，經過管道鏈接，不須要寫中間文件。高質量 Gulp的每一個插件只完成一個功能，這也是Unix的設計原則之一，各個功能經過流進行整合並完成複雜的任務。例如：Grunt的imagemin插件不只壓縮圖片，同時還包括緩存功能。他表示，在Gulp中，緩存是另外一個插件，能夠被別的插件使用，這樣就促進了插件的可重用性。易學 Gulp的核心API只有5個，掌握了5個API就學會了Gulp，以後即可以經過管道流組合本身想要的任務。

如何使用gulp配置本身的項目

要想在項目中使用gulp,就要全局安裝gulp,執行命令以下

npm install gulp -g 其中-g表示全局安裝（node本身安裝就可）

這樣就算是在計算機上安裝了全局gulp 也就意味着可使用gulp中的模塊了

下面跟我一塊兒學習在項目中如何使用吧

開車了 快點上車 。。嘟嘟嘟

新建文件夾managers,maneger下面新建兩個文件夾dist和src，一個表示源頭，一個表示輸出，而後經過git bash工具 在manager文件夾下執行命令

npm init (用於生成package.json文件)

執行結果以下

一路回車就行，最終獲得的目錄以下

而後就開始安裝須要用到的插件，這裏我作幾個重要的說明一下，其餘插件能夠本身去摸索.

npm install gulp--save-dev（save-dev指的是把gulp配置到本項目的package.json文件下，由於你要使用人家的插件嘛 確定須要它來指揮）
npm install gulp-uglify --save-dev(這個插件是用來壓縮js的)
npm install gulp-ruby-sass --save-dev(這個是用來編譯sass的)
npm install gulp-notify --save-dev(這個是提醒插件)

安裝這三個插件，安裝完成後你的package.json文件應該是這樣的（不是這樣的扇博主的face）

顯而易見你在devDependdencies中看到了你安裝的四個插件，如今就讓咱們來使用它們吧

首先，學會壓縮js，在src文件夾下新建文件夾js以及gulpfile.js，並在js文件夾下新建文件index.js

下面重點來了，就是如何去本身寫任務文件（gulpfile.js）

首先，在這裏給你們簡單說一下gulp重要的4個api

gulp.src()表示文件的來源 或者說是讀取文件
gulp.dest()表示文件的輸出 也就是輸出文件
gulp.task()表示要執行的任務
gulp.watch()表示要監聽的任務

具體的api請狠狠點擊這裏，不要留情面gulp

下面開始跟着我一塊兒寫任務吧

首先要引入須要的插件而後給gulp佈置任務：以下：

而後你在git bash 上輸入

gulp uglify(這個命令就是告訴gulp執行uglify任務，即：gulp+任務名字)

最後你會看到這麼一個喜慶的畫面

接着你會看到在你的dist文件夾下新生成了js文件夾 裏面有個index.js這個index.js就是壓縮事後的。

而後或許有人會問了，那麼若是個人js文件變更了，它會不會監聽到呢？

這個問題問的至關有水平，很好，遇到這樣提問的程序員，應該鼓勵一下，（鼓勵師如花何在）

在gulp你能夠經過watch來監聽js的改變，以下：

執行 gulp watch()

以下：

這個時候你去修改index.js文件 你會發現以下圖示：

這是爲何呢？哦 原來是這樣啊，當你改變你的js文件時候，gulp監聽到了文件的改變，它就會去執行一次uglify任務，也就是你改一次它壓縮一次。（忽然想到了亞索 很久沒lol了）

是否是頗有意思啊，我在寫一個關於sass的任務，但願你們可以理解哈

注意（sass基於ruby,因此你們還要去安裝ruby,不會的能夠自行百度）

到此，我相信你們對gulp有個簡單的認識了，也想躍躍欲試了，其實gulp還有不少插件，好比gulp-imagemin,gulp-rev,gulp-rev-collector，gulp-clean等須要你們慢慢去研究。

在追求卓越的道路上，就是要不斷的努力和總結，你們有啥疑問能夠加羣 474471759，找博主談人生 談理想。