? ? ?一直以來工作中都沒有用到過gulp泽腮，所以一直沒花時間去看寸认，前段時間做公司年會項目的時候，因為是微信端的網(wǎng)頁應用伍茄，需要在手機上運行，但是手機的緩存會導致每次修改的代碼沒有生效施逾，于是每次修改了css和js都要重新修改對應的css和js的版本號敷矫，特別麻煩，于是開始學習gulp汉额，網(wǎng)上與gulp相關的文章寫的都不太清楚沪饺，所以一直看不明白。綜合自己看到的幾篇文章闷愤，結合自己的理解之后整葡，重新寫了一篇，希望對大家有所幫助讥脐，文章中有不正確的地方遭居，歡迎批評指正！
1旬渠、安裝nodejs俱萍；
2、新建package.json文件告丢；
3枪蘑、全局和本地安裝gulp；
4、安裝gulp插件岳颇；
5照捡、新建gulpfile.js文件；
6话侧、通過命令提示符運行gulp任務栗精。
一、安裝nodejs
https://nodejs.org/en/選擇對應的版本下載
二瞻鹏、使用命令行
node -v查看安裝的nodejs版本悲立，出現(xiàn)版本號，說明剛剛已正確安裝nodejs新博。PS：未能出現(xiàn)版本號薪夕，請嘗試注銷電腦重試；
npm -v查看npm的版本號赫悄，npm是在安裝nodejs時一同安裝的nodejs包管理器
cd定位到目錄寥殖，用法：cd + 路徑；
dir列出文件列表涩蜘；
cls清空命令提示符窗口內容
新建項目工程gulp_web(可以自定義其他名稱)嚼贡，原文件夾的名稱為assets
壓縮后的文件夾的名稱為build
在命令行打開gulp_web文件夾所在的路徑，執(zhí)行下圖所示操作
三同诫、全局安裝gulp
1粤策、說明：全局安裝gulp目的是為了通過她執(zhí)行gulp任務；
2误窖、安裝：命令提示符執(zhí)行cnpm install gulp -g叮盘；(npm安裝有問題可以換成cnpm,cnpm安裝過程自行百度)
3、查看是否正確安裝：命令提示符執(zhí)行gulp -v霹俺，出現(xiàn)版本號即為正確安裝柔吼。
安裝gulp的時候，可能會提示gulp安裝失敗丙唧，如圖所示愈魏，遇到這個問題，可能是node的版本過低想际，重新安裝下node的最新版本
四培漏、新建package.json文件
1、說明：package.json是基于nodejs項目必不可少的配置文件胡本，它是存放在項目根目錄的普通json文件牌柄；
2、它是這樣一個json文件（注意：json文件內是不能寫注釋的侧甫，復制下列內容請刪除注釋）：
{
??"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珊佣、當然我們可以手動新建這個配置文件蹋宦，命令提示符執(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窃款；生產環(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)餐屎，我們全局安裝了gulp，項目也安裝了gulp玩祟，全局安裝gulp是為了執(zhí)行gulp任務腹缩，本地安裝gulp則是為了調用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放入其他文件夾下亦可）
它的內容大致是這樣的，如下：
//?引入?gulp
var?gulp?=?require('gulp');
//?引入組件
var?cssminify?=?require('gulp-minify-css');//?壓縮CSS
var?uglify?=?require('gulp-uglify');//?生產環(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的任務
gulp.task('css',function(){
return?gulp.src('./asset/css/*.css')//?該任務針對的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目錄內
});
//?創(chuàng)建一個名為script的任務
gulp.task('script',function(){
return?gulp.src('./asset/scripts/app/*.js')//?獲取全部的js文件? ? ?
? ? ? ?.pipe(uglify())//?生產環(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目錄內
});
gulp.task('revHtml',function?()?{
return?gulp.src(['./rev/**/*.json','./asset/view/*.html'])//?讀取rev-manifest.json文件以及需要進行css名替換的文件
? ? ? ?.pipe(revCollector())//?執(zhí)行文件內css名和js名的替換
? ? ? ?.pipe(gulp.dest('./build/view'));//?替換后的文件輸出的目錄,Html更換css菇曲、js文件版本
});
//?在樣式文件中修改的內容一旦保存可以直接在顯示器顯示渲染效果冠绢，無需刷新瀏覽器，這就是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í)行下面的七喊式。
七孵户、運行gulp
1、說明：命令提示符執(zhí)行gulp 任務名稱岔留；
2夏哭、gulp clean?清空生成的文件
3、當執(zhí)行gulp default或gulp將會調用default任務里的所有任務
八献联、使用webstorm運行gulp任務或者命令提示符執(zhí)行gulp
1竖配、說明：使用webstorm可視化運行gulp任務；
2里逆、使用方法：將項目導入webstorm进胯，右鍵gulpfile.js 選擇”Show Gulp Tasks”打開Gulp窗口，若出現(xiàn)”No task found”原押，選擇右鍵”Reload tasks”胁镐，雙擊運行即可。
踩過的坑：
來談談我遇到的一點小小的坑班眯。
代碼敲完希停，需要回到命令行，運行gulp署隘。直接輸入gulp宠能，就開始運行，期間會報一些error磁餐，不要緊張违崇，指的是js文件里一些語法錯誤，無傷大雅诊霹，成功創(chuàng)建出壓縮文件才是最終目的羞延。
? ? ? ? 那么如果需要修改代碼，必須一直把cmd控制臺保持打開狀態(tài)脾还，否則無法執(zhí)行watch操作伴箩。第一點坑，就是編輯器的自動保存功能鄙漏，一行代碼如果寫的不順嗤谚，或是中途打岔棺蛛，比如‘$scope.’，還沒接著寫完巩步，編輯器自動保存的功能會使jshint檢查出語法錯誤旁赊，導致gulp的停止運行。
如果用的是webstrom編輯器的椅野，可以不用每次打開命令行终畅，右鍵選中gulpfile.js，show gulp tasks竟闪，再點擊default即可离福。
操作過程中，我遇到的第二個坑就是安裝gulp插件瘫怜。由于我的電腦以前就安裝過node术徊，所以沒有重新安裝本刽，導致運行cnpm install gulp --save-dev的時候鲸湃，一直安裝gulp報錯，后來重新安裝了最新版的node之后子寓，再運行cnpm install gulp --save-dev就可以成功安裝gulp了暗挑。
遇到的第三個坑就是添加版本號，找了好幾篇文章都說的不清楚斜友，研究了好久才成功炸裆，以上我的代碼是經(jīng)過自己驗證過才貼上去的，可以達到當修改asset里面的css和js鲜屏，同步改變build里面的css和js的目的烹看，同時會使得html里面的版本號發(fā)生改變，可解決緩存問題洛史。
