? ? ?一直以來工作中都沒有用到過gulp，所以一直沒花時間去看，前段時間做公司年會項目的時候，因為是微信端的網(wǎng)頁應(yīng)用，需要在手機上運行，但是手機的緩存會導(dǎo)致每次修改的代碼沒有生效，于是每次修改了css和js都要重新修改對應(yīng)的css和js的版本號，特別麻煩，于是開始學(xué)習(xí)gulp，網(wǎng)上與gulp相關(guān)的文章寫的都不太清楚，所以一直看不明白。綜合自己看到的幾篇文章，結(jié)合自己的理解之后，重新寫了一篇，希望對大家有所幫助，文章中有不正確的地方，歡迎批評指正！
1、安裝nodejs；
2、新建package.json文件；
3、全局和本地安裝gulp；
4、安裝gulp插件；
5、新建gulpfile.js文件；
6、通過命令提示符運行g(shù)ulp任務(wù)。
一、安裝nodejs
https://nodejs.org/en/選擇對應(yīng)的版本下載
二、使用命令行
node -v查看安裝的nodejs版本，出現(xiàn)版本號，說明剛剛已正確安裝nodejs。PS：未能出現(xiàn)版本號，請嘗試注銷電腦重試；
npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器
cd定位到目錄，用法：cd + 路徑；
dir列出文件列表；
cls清空命令提示符窗口內(nèi)容
新建項目工程gulp_web(可以自定義其他名稱)，原文件夾的名稱為assets
壓縮后的文件夾的名稱為build
在命令行打開gulp_web文件夾所在的路徑，執(zhí)行下圖所示操作
三、全局安裝gulp
1、說明：全局安裝gulp目的是為了通過她執(zhí)行g(shù)ulp任務(wù)；
2、安裝：命令提示符執(zhí)行cnpm install gulp -g；(npm安裝有問題可以換成cnpm,cnpm安裝過程自行百度)
3、查看是否正確安裝：命令提示符執(zhí)行g(shù)ulp -v，出現(xiàn)版本號即為正確安裝。
安裝gulp的時候，可能會提示gulp安裝失敗，如圖所示，遇到這個問題，可能是node的版本過低，重新安裝下node的最新版本
四、新建package.json文件
1、說明：package.json是基于nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；
2、它是這樣一個json文件（注意：json文件內(nèi)是不能寫注釋的，復(fù)制下列內(nèi)容請刪除注釋）：
{
??"name":"test",??//項目名稱（必須）
??"version":"1.0.0",??//項目版本（必須）
??"description":"This is for study gulp project !",??//項目描述（必須）
??"homepage":"",??//項目主頁
??"repository":{????//項目資源庫
????"type":"git",
????"url":"https://git.oschina.net/xxxx"
??},
??"author":{????//項目作者信息
????"name":"surging",
????"email":"surging2@qq.com"
??},
??"license":"ISC",????//項目許可協(xié)議
??"devDependencies":{????//項目依賴的插件
????"gulp":"^3.8.11",
????"gulp-less":"^3.0.0"
??}
}
3、當(dāng)然我們可以手動新建這個配置文件，命令提示符執(zhí)行cnpm init
五、本地安裝gulp插件
接著開始本地安裝gulp各種插件，在這里找你需要的插件。有四個是用得最多的，必備的
1、語法檢查 ? （gulp-jshint）
2、合并文件 ? （gulp-concat）
3、壓縮代碼 ? （gulp-uglify）
4、文件重命名 ? （gulp-rename）
常用插件安裝步驟：
本示例以gulp-less為例（編譯less文件），命令提示符執(zhí)行cnpm install gulp-less --save-dev；
為了能正常使用，我們還得本地安裝gulp
cnpm install gulp --save-dev；
cnpm install gulp-sass --save-dev；
cnpm install gulp-concat --save-dev；多個文件合并為一個
cnpm install gulp-minify-css --save-dev；將CSS壓縮處理成一行（以前的寫法）
cnpm install gulp-clean-css --save-dev；將CSS壓縮處理成一行（現(xiàn)在常用gulp-clean-css）
cnpm install gulp-uglify --save-dev；生產(chǎn)環(huán)境下將JS壓縮處理成一行
cnpm install gulp-sourcemaps --save-dev；
cnpm install gulp-smushit --save-dev；圖片壓縮
npm install gulp-rev --save-dev；對文件名加MD5后綴
cnpm install gulp-rev-collector --save-dev；路徑替換
cnpm install run-sequence --save-dev；
cnpm install del --save-dev；
安裝過程如下圖
--save-dev 是可以省掉你手動修改package.json文件的步驟，正常情況下得連同版本號手動將他們添加到模塊配置文件package.json中的依賴里
安裝成功后的插件在package.json文件的devDependencies中可以看到，如下圖
PS：細心的你可能會發(fā)現(xiàn)，我們?nèi)职惭b了gulp，項目也安裝了gulp，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)，本地安裝gulp則是為了調(diào)用gulp插件的功能。
更改gulp-rev和gulp-rev-collector(重要)
1.打開node_modules\gulp-rev\index.js
? 第135行: manifest[originalFile] = revisionedFile;
? 更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打開node_modules\rev-path\nodemodules\rev-path\index.js
第9行:return?modifyFilename(pth,?(filename,?ext)?=>?`${filename}-${hash}${ext}`);
更新為:?returnmodifyFilename(pth,?(filename,?ext)?=>`${filename}${ext}`);
3.打開node_modules\gulp-rev-collector\index.js
第40行:?var?cleanReplacement?=? path.basename(json[key]).replace(new?RegExp(?opts.revSuffix?),?''?);
更新為:?var?cleanReplacement?=path.basename(json[key]).split('?')[0];
安裝配置完成，要開始寫代碼啦。
六、新建gulpfile.js文件（非常重要）
在項目目錄gulp_web下新建gulpfile.js文件，gulp有五種方法：task，run，watch，src，和dest.
說明：gulpfile.js是gulp項目的配置文件，是位于項目根目錄的普通js文件（其實將gulpfile.js放入其他文件夾下亦可）
它的內(nèi)容大致是這樣的，如下：
//?引入?gulp
var?gulp?=?require('gulp');
//?引入組件
var?cssminify?=?require('gulp-minify-css');//?壓縮CSS
var?uglify?=?require('gulp-uglify');//?生產(chǎn)環(huán)境下壓縮JS
var?smushit?=?require('gulp-smushit');//?圖片壓縮
var?rev?=?require('gulp-rev');//?對文件名加MD5后綴(版本號)
var?revCollector?=?require('gulp-rev-collector');//?路徑替換
var?runSequence?=?require('run-sequence');
var?del?=?require('del');
//?創(chuàng)建一個名為css的任務(wù)
gulp.task('css',function(){
return?gulp.src('./asset/css/*.css')//?該任務(wù)針對的css文件
? ? ? ?.pipe(cssminify())//?將css壓縮處理成一行
? ? ? ?.pipe(rev())//?文件名加MD5后綴
? ? ? ?.pipe(gulp.dest('./build/css'))//?生成到根目錄build文件夾下
? ? ? ?.pipe(rev.manifest())//?生成一個rev-manifest.json
? ? ? ?.pipe(gulp.dest('./rev/revcss'));//?將rev-manifest.json保存到revcss目錄內(nèi)
});
//?創(chuàng)建一個名為script的任務(wù)
gulp.task('script',function(){
return?gulp.src('./asset/scripts/app/*.js')//?獲取全部的js文件? ? ?
? ? ? ?.pipe(uglify())//?生產(chǎn)環(huán)境下將JS壓縮處理成一行
? ? ? ?.pipe(rev())//?文件名加MD5后綴
? ? ? ?.pipe(gulp.dest('./build/scripts/app'))//?生成到根目錄build文件夾下
? ? ? ?.pipe(rev.manifest())//?生成一個rev-manifest.json
? ? ? ?.pipe(gulp.dest('./rev/revjs'));//?將rev-manifest.json保存到revjs目錄內(nèi)
});
gulp.task('revHtml',function?()?{
return?gulp.src(['./rev/**/*.json','./asset/view/*.html'])//?讀取rev-manifest.json文件以及需要進行css名替換的文件
? ? ? ?.pipe(revCollector())//?執(zhí)行文件內(nèi)css名和js名的替換
? ? ? ?.pipe(gulp.dest('./build/view'));//?替換后的文件輸出的目錄,Html更換css、js文件版本
});
//?在樣式文件中修改的內(nèi)容一旦保存可以直接在顯示器顯示渲染效果，無需刷新瀏覽器，這就是watch的功能。
gulp.task('watch',function?()?{
gulp.watch(['./asset/css/*.css'],?['css']);
gulp.watch(['./asset/scripts/app/*.js'],?['script']);
gulp.watch(['./rev/**/*.json','./asset/view/*.html'],?['revHtml']);
});
gulp.task('dev',function?(done)?{
condition?=false;
runSequence(
['css'],
['script'],
['revHtml'],
['watch'],
done);
});
//?執(zhí)行命令gulp?clean
gulp.task('clean',function?(cb)?{
del([
//?這里我們使用一個通配模式來匹配?文件夾中的所有東西
? ? ? ?'./build/css/*',
'./build/scripts/app/*',
? ? ? ?'./build/view/*'
? ?],?cb);
});
//?執(zhí)行命令gulp
gulp.task('default',?['dev']);
完成以上配置，現(xiàn)在開始寫你的代碼啦！代碼寫完再執(zhí)行下面的七。
七、運行g(shù)ulp
1、說明：命令提示符執(zhí)行gulp 任務(wù)名稱；
2、gulp clean?清空生成的文件
3、當(dāng)執(zhí)行g(shù)ulp default或gulp將會調(diào)用default任務(wù)里的所有任務(wù)
八、使用webstorm運行g(shù)ulp任務(wù)或者命令提示符執(zhí)行g(shù)ulp
1、說明：使用webstorm可視化運行g(shù)ulp任務(wù)；
2、使用方法：將項目導(dǎo)入webstorm，右鍵gulpfile.js 選擇”Show Gulp Tasks”打開Gulp窗口，若出現(xiàn)”No task found”，選擇右鍵”Reload tasks”，雙擊運行即可。
踩過的坑：
來談?wù)勎矣龅降囊稽c小小的坑。
代碼敲完，需要回到命令行，運行g(shù)ulp。直接輸入gulp，就開始運行，期間會報一些error，不要緊張，指的是js文件里一些語法錯誤，無傷大雅，成功創(chuàng)建出壓縮文件才是最終目的。
? ? ? ? 那么如果需要修改代碼，必須一直把cmd控制臺保持打開狀態(tài)，否則無法執(zhí)行watch操作。第一點坑，就是編輯器的自動保存功能，一行代碼如果寫的不順，或是中途打岔，比如‘$scope.’，還沒接著寫完，編輯器自動保存的功能會使jshint檢查出語法錯誤，導(dǎo)致gulp的停止運行。
如果用的是webstrom編輯器的，可以不用每次打開命令行，右鍵選中g(shù)ulpfile.js，show gulp tasks，再點擊default即可。
操作過程中，我遇到的第二個坑就是安裝gulp插件。由于我的電腦以前就安裝過node，所以沒有重新安裝，導(dǎo)致運行cnpm install gulp --save-dev的時候，一直安裝gulp報錯，后來重新安裝了最新版的node之后，再運行cnpm install gulp --save-dev就可以成功安裝gulp了。
遇到的第三個坑就是添加版本號，找了好幾篇文章都說的不清楚，研究了好久才成功，以上我的代碼是經(jīng)過自己驗證過才貼上去的，可以達到當(dāng)修改asset里面的css和js，同步改變build里面的css和js的目的，同時會使得html里面的版本號發(fā)生改變，可解決緩存問題。
