怎么用Gulp搭建簡易前端自動化工程

本篇內(nèi)容主要講解“怎么用Gulp搭建簡易前端自動化工程”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用Gulp搭建簡易前端自動化工程”吧!

準(zhǔn)備工作

安裝Node

首先Gulp是基于Nodejs的，所以安裝Nodejs是前提，Node可以說是前端神器，基于Node有各種各樣的工具，正是因?yàn)檫@些工具讓我們非常方便的構(gòu)建前端工程。

更改Node插件默認(rèn)安裝位置(非必需)

我自己一般不喜歡在C盤狀太多與系統(tǒng)無關(guān)的東西，而通過Node自帶的npm安裝的插件默認(rèn)在C盤，但是我將Node安裝到D盤后，想讓插件就安裝在Nodejs的主目錄下，怎么辦呢?

• 在Node主目錄下新建"node_global"及"node_cache"兩個文件夾

啟動cmd，輸入 //后面的設(shè)置目錄根據(jù)你的目錄結(jié)構(gòu)自行更改 npm config set prefix "D:\Program\nodejs\node_global" npm config set cache "D:\Program\nodejs\node_cache"

• 關(guān)閉cmd，打開系統(tǒng)對話框，“我的電腦”右鍵“屬性”-“高級系統(tǒng)設(shè)置”-“高級”-“環(huán)境變量”。

• 進(jìn)入環(huán)境變量對話框，在系統(tǒng)變量下新建"NODE_PATH"，輸入"D:Programnodejsnode_globalnode_module"。  由于改變了module的默認(rèn)地址，所以上面的用戶變量都要跟著改變一下(用戶變量"PATH"修改為"D:Programnodejsnode_global")，要不使用module的時候會導(dǎo)致輸入命令出現(xiàn)“xxx不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件”這個錯誤。

經(jīng)過這四步的設(shè)置就可以讓安裝的Node插件放在Nodejs的主目錄了。

安裝Gulp

//全局安裝Gulp npm install -g gulp //在項(xiàng)目中安裝Gulp npm install --save-dev gulp

運(yùn)行g(shù)ulp -v,如果不報(bào)錯，表示安裝成功

然后在命令行運(yùn)行

npm init

讓項(xiàng)目生產(chǎn)package.json文件

搭建工程

眾所周知，在開發(fā)工程中有開發(fā)和上線兩個過程，在開發(fā)中，我們一般需要自動刷新以及實(shí)時編譯，但是如果上線，我們就需要考慮很多優(yōu)化的東西，比如文件編譯壓縮，靜態(tài)資源放緩存處理等等問題，我自己搭的這個工程只涉及到文件編譯壓縮，實(shí)時刷新，靜態(tài)資源放緩存這三個基本的流程。

在項(xiàng)目的目錄結(jié)構(gòu)如下

-------------------project     |     |--------------dist (該文件夾為打包生成的)     |   |     |   |----------css     |   |   |     |   |   |------index-9dcc24fe2e.css     |   |     |   |----------js     |   |   |     |   |   |------index-9dcc24fe2e.js     |   |----------index.html      |     |--------------src     |   |     |   |----------scss     |   |   |     |   |   |------index.scss     |   |     |   |----------js     |   |   |     |   |   |------index.js     |   |     |   |----------index.html     |--------------gulpfile.js     |--------------package.json

開發(fā)所用流程

文件編譯

在工程中準(zhǔn)備使用scss作為css的預(yù)編譯，所以需要利用gulp對scss進(jìn)行編譯，所以首先安裝gulp-sass。

npm install --save-dev gulp-sass

安裝完成之后，直接在gulpfile.js引用配置

const sass = require('gulp-sass'); //scss編譯  gulp.task('scss:dev',()=>{     gulp.src('src/scss/*.scss')     .pipe(sass())     .pipe(gulp.dest('dist/css')); //將生成好的css文件放到dist/css文件夾下 });

這里簡單介紹下gulp的兩個api：

gulp.src()輸入符合所提供的匹配模式或者匹配模式的數(shù)組的文件。將返回一個stream或者可以被piped到別的插件中。讀文件

gulp.dest()能被pipe進(jìn)來，并且將會寫文件。并重新輸出(emits)所有數(shù)據(jù)，因此可以將它pipe到多個文件夾，如果文件夾不存在則將會自動創(chuàng)建。寫文件

實(shí)時刷新

實(shí)現(xiàn)實(shí)時刷新的工具有很多，我自己使用browser-sync，這個工具的功能非常強(qiáng)大，想了解它更多的用法可以查看官網(wǎng)：http://www.browsersync.cn/。

首先我們在項(xiàng)目中安裝該模塊

npm install --save-dev browser-sync

根據(jù)官網(wǎng)的browser-sync與gulp的配置，得到如下配置：

const browserSync = require('browser-sync').create(); //實(shí)時刷新 const reload = browserSync.reload;  gulp.task('dev',['scss:dev'],function () {     browserSync.init({         server:{             baseDir:'./'  //設(shè)置服務(wù)器的根目錄         },         logLevel: "debug",         logPrefix:"dev",         browser:'chrome',         notify:false //開啟靜默模式     });     //使用gulp的監(jiān)聽功能，實(shí)現(xiàn)編譯修改過后的文件     gulp.watch('src/scss/*.scss',['scss:dev']);     gulp.watch(('*.html')).on('change',reload); });

這樣，一個簡單的gulp開發(fā)流程就出來了，僅僅只是一個編譯scss和一個實(shí)時刷新。

打包上線所有流程

打包上線，我們更多的是考慮，靜態(tài)資源防緩存，優(yōu)化。對css，js的壓縮，對圖片的處理，我寫的這個簡單的流程中并沒有涉及對圖片的處理，所以這里僅針對css，js，html處理。

壓縮css我們使用gulp-sass就可以，因?yàn)樗诰幾gscss的時候有一個配置選項(xiàng)可以直接輸出被壓縮的css。壓縮js我使用了gulp-uglify，靜態(tài)資源防緩存使用gulp-rev和gulp-rev-collector。

對css，js的處理

//scss編譯 gulp.task('css',()=> {     gulp.src('src/scss/*.scss')         .pipe(sass({             outputStyle: 'compressed'               //編譯并輸出壓縮過的文件         }))         .pipe(rev())                                //給css添加哈希值         .pipe(gulp.dest('dist/css'))         .pipe(rev.manifest())                       //給添加哈希值的文件添加到清單中         .pipe(gulp.dest('rev/css')); }); //壓縮js gulp.task('js', ()=> {     gulp.src('src/js/*js')         .pipe(uglify())         .pipe(rev())                                //給js添加哈希值         .pipe(gulp.dest('dist/js'))         .pipe(rev.manifest())                       //給添加哈希值的文件添加到清單中         .pipe(gulp.dest('rev/js')); });

其中g(shù)ulp-rev是為css文件名添加哈希值，而rev.manifest()會生成一個json文件，這個json文件中記錄了原文件名和添加哈希值后的文件名的一個對應(yīng)關(guān)系，這個對應(yīng)關(guān)系在***對應(yīng)替換html的引用的時候會用到。

生成的json文件如下：

{  "index.css": "index-9dcc24fe2e.css"  }

由于給文件添加了哈希值，所以每次編譯出來的css和js都是不一樣的，這會導(dǎo)致有很多冗余文件，所以我們可以每次在生成文件之前，先將原來的文件全部清空。

gulp中也有做這個工作的插件---gulp-clean，因此我們可以在編譯壓縮添加哈希值之前先將原文將清空。

清空生成的項(xiàng)目文件

const clean = require('gulp-clean');                 //清空文件夾里所有的文件 //每次打包時先清空原有的文件夾 gulp.task('clean', ()=> {     gulp.src(['dist', 'rev'], {read: false}) //這里設(shè)置的dist表示刪除dist文件夾及其下所有文件         .pipe(clean()); });

讓添加哈希編碼的文件自動添加到html中

前面提到的gulp-rev實(shí)現(xiàn)了給文件名添加哈希編碼，但是在打包完成后如何讓原來未添加哈希值的引用自動變?yōu)橐呀?jīng)添加哈希值的引用，這里用到gulp-rev的一個插件gulp-rev-collector，配置如下：

//將處理過的css，js引入html gulp.task('reCollector',()=>{     gulp.src(['rev/**/*.json','src/*.html'])         .pipe(reCollector({             replaceReved: true,  //模板中已經(jīng)被替換的文件是否還能再被替換,默認(rèn)是false             dirReplacements: {   //標(biāo)識目錄替換的集合, 因?yàn)間ulp-rev創(chuàng)建的manifest文件不包含任何目錄信息,                 'css/': '/dist/css/',                 'js/': '/dist/js/'             }         }))         .pipe(gulp.dest('dist')) });

并沒有正常替換?

在我自己寫的時候，出現(xiàn)這個問題，運(yùn)行完成該任務(wù)后，html中的css和js引用并沒有發(fā)生變化，網(wǎng)上搜了半天，才知道是由于自己用了gulp-rename插件，然后將文件名都添加了.min(至于為什么添加，僅僅是因?yàn)槭菈嚎s過的，應(yīng)該寫個)而在自己寫的html里面引用的文件并沒有.min，由于gulp-rev-collector在替換的時候根據(jù)生成的json文件替換，在json中，文件都有了.min而在html中沒有，所以無法匹配，自然也就不能實(shí)現(xiàn)替換了，所以在替換的時候一定要注意gulp-rev生成的json文件中的css，js與html中的引用的一樣，否則無法實(shí)現(xiàn)替換。

<font  color="red">在gulp-rev-collector的api中有一個revSuffix，這個看起來可以實(shí)現(xiàn)類似于gulp-rename的功能，但是不知道該怎么用，大家如果知道的話請告訴我...</font>

執(zhí)行所有任務(wù)

完成上面幾個步驟后我們將所有任務(wù)串起來，讓其可以一條命令然后全部執(zhí)行

gulp.task('build',['clean', 'css', 'js', 'reCollector']);

再次理解gulp

gulp---它的task是順序執(zhí)行嗎?

本以為到這里，就算是寫完了，運(yùn)行，***，打包生成文件，再運(yùn)行一次，報(bào)錯了!!!!

[19:04:57] Finished 'default' after 7.38 μs stream.js:74       throw er; // Unhandled stream error in pipe.       ^  Error: ENOENT: no such file or directory, stat 'D:\project\dist\js\index-6045b384e6.min.js'     at Error (native)

提示我找不到這個文件，這讓我很郁悶啊，然后我分開執(zhí)行，很ok，可以確定是執(zhí)行順序有問題，很可能在沒有清理完成就執(zhí)行后面了，查了gulp的官網(wǎng)文檔才知道本身gulp的pipe是一個一個任務(wù)進(jìn)行的，是同步的，但是每個task之間是不同步的，是一起進(jìn)行的，這也驗(yàn)證了我的猜想，所以在網(wǎng)上找如何解決這個問題，找到一個叫run-sequence的npm插件，配置文件如下：

//進(jìn)行打包上線 gulp.task('build', ()=> {     runSequence('clean', ['css', 'js'], 'reCollector'); });

本以為運(yùn)行就ok，結(jié)果，還是報(bào)錯，這里就涉及到對gulp的另一個理解

run-sequence插件對異步任務(wù)的處理

在用這個插件讓任務(wù)有序進(jìn)行后，我想進(jìn)一步直觀的看到它對任務(wù)的序列化，自己寫了一個demo，如下：

gulp.task('a',function(){     setTimeout(function () {         console.log(1);     },30); }); gulp.task('b',function() {     console.log(2); }); gulp.task('ab',function(){     runSequence('a','b'); });

但是這里就出現(xiàn)問題了，runSequence不管用了，找插件的說明和gulp官方文檔，原來異步任務(wù)，像setTimeout，readFile等，需要添加一個callback的執(zhí)行，這里的callback()就會返回一個promise的resolve()，告訴后面的任務(wù)，當(dāng)前任務(wù)已經(jīng)完成，后面可以繼續(xù)執(zhí)行了，所以在task  a里面執(zhí)行callback。

gulp.task('a',function(cb){     setTimeout(function () {         console.log(1);         cb();     },30); });

那為什么前面寫的那些任務(wù)不需要添加一個callback呢?由于gulp的pipe流讓每一個task中的小任務(wù)(每一個pipe)順序執(zhí)行，從而整個pipe流是同步的，并不是異步任務(wù)，所以并不需要手動讓其返回promise，run-sequence會自動幫我們管理。

到此，相信大家對“怎么用Gulp搭建簡易前端自動化工程”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！