前端自動化構建工具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的任務，希望大家能夠理解哈
