前端自動化構建工具gulp的安裝和使用(包括添加版本號)

? ? ?一直以來工作中都沒有用到過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ā)生改變,可解決緩存問題洛史。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末惯殊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子也殖,更是在濱河造成了極大的恐慌土思,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件忆嗜,死亡現(xiàn)場離奇詭異己儒,居然都是意外死亡,警方通過查閱死者的電腦和手機捆毫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門闪湾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人绩卤,你說我怎么就攤上這事途样∷鸷希” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵娘纷,是天一觀的道長嫁审。 經(jīng)常有香客問我,道長赖晶,這世上最難降的妖魔是什么律适? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮遏插,結果婚禮上捂贿,老公的妹妹穿的比我還像新娘。我一直安慰自己胳嘲,他們只是感情好厂僧,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著了牛,像睡著了一般颜屠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鹰祸,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天甫窟,我揣著相機與錄音,去河邊找鬼蛙婴。 笑死粗井,一個胖子當著我的面吹牛,可吹牛的內容都是我干的街图。 我是一名探鬼主播浇衬,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼餐济!你這毒婦竟也來了耘擂?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤颤介,失蹤者是張志新(化名)和其女友劉穎梳星,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滚朵,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡冤灾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了辕近。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片韵吨。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖移宅,靈堂內的尸體忽然破棺而出归粉,到底是詐尸還是另有隱情椿疗,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布糠悼,位于F島的核電站届榄,受9級特大地震影響,放射性物質發(fā)生泄漏倔喂。R本人自食惡果不足惜铝条,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望席噩。 院中可真熱鬧班缰,春花似錦、人聲如沸悼枢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽馒索。三九已至莹妒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間双揪,已是汗流浹背动羽。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工包帚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留渔期,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓渴邦,卻偏偏與公主長得像疯趟,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谋梭,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容