大家好，我是IT修真院深圳分院第01期學員，一枚正直純潔善良的web程序員。
今天給大家分享一下，修真院官網JS（職業）任務5，深度思考中的知識點——如何使用gulp？
1. 背景
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基于Nodejs的自動任務運行器， 它能自動化地完成javascript/coffee/sass/less/html /image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。在實現上，它借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。
2. 方法
2.1 安裝gulp
首先安裝nodejs，通過nodejs的npm全局安裝和項目安裝gulp，其次在項目里安裝所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并寫好配置信息（定義gulp任務），最后通過命令提示符運行gulp任務即可。
安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務
2.1.1 安裝nodejs
node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。
npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器。
2.1.2 全局安裝gulp
npm install -g gulp 使用npm全局安裝gulp
gulp -v 查看版本
進入項目根目錄建立一個package.json(package.json是基于nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件)
可以使用npm init - y 自動設置
2.1.3 本地項目安裝gulp和插件
定位目錄命令后：
npm install gulp --save-dev 本地安裝gulp
npm install name --save-dev 安裝插件
2.1.4 配置gulpfile.js
//引入組件
var gulp = require('gulp'),
uglify = require('gulp-uglify');//壓縮文件插件
//創建任務
//gulp.task(name,[deps], fn)
//name 為任務名
//deps 是當前定義的任務需要依賴的其他任務
//fn 為任務函數
gulp.task('jsmin', function () {
gulp.src('demo.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
3. 常見問題
如何使用gulp
4. 解決方案
以上
5. 編碼實戰
上傳為demo文件夾，使用webstorm打開，右鍵gulpfile.js，選擇show gulp tasks，雙擊任務運行。
6. 擴展思考
gulp常用的的API：task，run，watch，src和dest
6.1、gulp.src(globs,[options])
輸出符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。
globs參數是文件匹配模式(類似正則表達式)，用來匹配文件路徑(包括文件名)，當然這里也可以直接指定某個具體的文件路徑。當有多個匹配模式時，該參數可以為一個數組。
options為可選參數。通常情況下我們不需要用到。
6.2、gulp.dest(path,[options])
gulp.dest()方法是用來寫文件 path為寫入文件的路徑，如果文件夾不存在，將會自動創建它。
options為一個可選的參數對象，通常我們不需要用到。
6.3、gulp.task(name,[deps], fn)
用來定義任務，name 為任務名。
deps 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢后才開始執行。如果沒有依賴，則可省略這個參數。
fn 為任務函數，我們把任務要執行的代碼都寫在里面。該參數也是可選的。
6.4、gulp.watch(glob,[opts], tasks)
glob 為要監視的文件匹配模式，用來指定具體監控哪些文件的變動。
opts 為一個可選的配置對象，通常不需要用到。
tasks 為文件變化后要執行的任務，為一個數組。
6.5、gulp.run(tasks...)盡可能多的并行運行多個task。
理想的寫法是能控制哪些任務串行執行，哪些任務并行執行。
解決辦法：
每個需要依賴其他任務的任務寫依賴。
使用插件
gulp的當前最新、未正式發布版本gulp 4.0也提供了新的API(series、parallel)來解決這個問題。
series里的任務是順序執行的，parallel里的任務是同時執行的。
7. 參考文獻
8. 更多討論
grunt、webpack的使用
鳴謝
感謝大家觀看
BY : 王蒙
視頻鏈接
------------------------------------------------------------------------------------------------------------------------
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
