由於我所在的項目組一直在用gulp構建工具，而我只是在前人搭好的環境下每次運行gulp packJs來打包js，對裡面的東西全然不知，剛好最近有些時間就想自己從學學將gulp怎麼用於構建前端項目中，這樣也會對這個構建工具有一些深刻的理解。 首先，gulp是什麼？gulp是基於nodejs的自動任務運 ...
由於我所在的項目組一直在用gulp構建工具，而我只是在前人搭好的環境下每次運行gulp packJs來打包js，對裡面的東西全然不知，剛好最近有些時間就想自己從學學將gulp怎麼用於構建前端項目中，這樣也會對這個構建工具有一些深刻的理解。
首先，gulp是什麼？gulp是基於nodejs的自動任務運行器，能自動地完成html js css sass image等文件的的檢查、合併、壓縮、瀏覽器自動刷新、部署文件生成，在實現上，借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，輸入輸出是基於流式的。gulp不需要複雜的配置文件（所以構建腳本是代碼而不是配置文件），都是使用標準庫（node.js standard library）來編寫腳本；插件都很簡單，只負責完成一件事－基本上都是 20 行左右的函數；任務都以最大的併發數來執行。
其次，安裝和使用，網上有好多安裝教程這裡就簡單說下。第一，node是環境需要，所以應首先安裝；第二，全局安裝gulp（npm install -g gulp）再在項目下局部安裝gulp（npm install -save--dev gulp）；第三，在項目目錄下麵新建基於nodejs不可少的package.json（也可以用命令行npm init）和gulp的配置文件gulpfile.js。然後需要什麼插件安裝後在gulpfile.js裡面require一下操作就行。
最後，說說gulp最常用的api函數（下麵只寫一個大概，具體還需親自去看api文檔）：
① gulp.task(name[, deps], fn)：name是任務名稱，deps是可選的數組（該任務依賴的任務），fn是調用插件操作；
② gulp.src(globs[, options])：指明處理的源文件路徑，options是可選的，返回當前流至可用插件。
③ gulp.dest(path[, options])：指明處理後的輸出路徑;
④ gulp.watch(glob[, options], tasks) / gulp.watch(glob[, options, cb])：監視文件的變化並運行相應的任務。
最後最後再說一個自己搭建過程中遇到的一個小問題，就是用http-server和livereload在我的電腦上始終沒起作用，後來換了一種方式改用gulp-connect就可以實現瀏覽器自動刷新了。後來還試了一下基本的js css壓縮插件 也都沒有問題，以後再慢慢深入吧。總體感覺gulp還是挺簡潔使用的。
