基于Gulp的簡易前端自動化工程搭建

作者：楓s的思念 2016-09-08 15:20:04

上個月月底在公司提出關于前后端分離的想法，并且開始研究關于前后端分離，前端工程化，模塊化的一些東西，上周開始我準備自己開始寫基于Gulp流的前端工程文件，這兩天有時間，著手開始實現這個想法，但是寫的過程中，遇到了一些問題，正是因為這些問題的解決讓我對Gulp的流式處理有了更深的理解，寫下這篇文章，分享一下這倆天我在寫Gulp的時候學到的一些東西。

準備工作

安裝Node

首先Gulp是基于Nodejs的，所以安裝Nodejs是前提，Node可以說是前端神器，基于Node有各種各樣的工具，正是因為這些工具讓我們非常方便的構建前端工程。

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

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

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

啟動cmd，輸入 
//后面的設置目錄根據你的目錄結構自行更改 
npm config set prefix "D:\Program\nodejs\node_global" 
npm config set cache "D:\Program\nodejs\node_cache"

關閉cmd，打開系統對話框，“我的電腦”右鍵“屬性”-“高級系統設置”-“高級”-“環境變量”。
進入環境變量對話框，在系統變量下新建"NODE_PATH"，輸入"D:Programnodejsnode_globalnode_module"。由于改變了module的默認地址，所以上面的用戶變量都要跟著改變一下(用戶變量"PATH"修改為"D:Programnodejsnode_global")，要不使用module的時候會導致輸入命令出現“xxx不是內部或外部命令，也不是可運行的程序或批處理文件”這個錯誤。

經過這四步的設置就可以讓安裝的Node插件放在Nodejs的主目錄了。

安裝Gulp

//全局安裝Gulp 
npm install -g gulp 
//在項目中安裝Gulp 
npm install --save-dev gulp

運行gulp -v,如果不報錯，表示安裝成功

然后在命令行運行

npm init

讓項目生產package.json文件

搭建工程

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

在項目的目錄結構如下

-------------------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

開發所用流程

文件編譯

在工程中準備使用scss作為css的預編譯，所以需要利用gulp對scss進行編譯，所以首先安裝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()輸入符合所提供的匹配模式或者匹配模式的數組的文件。將返回一個stream或者可以被piped到別的插件中。讀文件

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

實時刷新

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

首先我們在項目中安裝該模塊

npm install --save-dev browser-sync

根據官網的browser-sync與gulp的配置，得到如下配置：

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

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

打包上線所有流程

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

壓縮css我們使用gulp-sass就可以，因為它在編譯scss的時候有一個配置選項可以直接輸出被壓縮的css。壓縮js我使用了gulp-uglify，靜態資源防緩存使用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')); 
});

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

生成的json文件如下：

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

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

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

清空生成的項目文件

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

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

前面提到的gulp-rev實現了給文件名添加哈希編碼，但是在打包完成后如何讓原來未添加哈希值的引用自動變為已經添加哈希值的引用，這里用到gulp-rev的一個插件gulp-rev-collector，配置如下：

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

并沒有正常替換?

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

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

執行所有任務

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

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

再次理解gulp

gulp---它的task是順序執行嗎?

本以為到這里，就算是寫完了，運行，***，打包生成文件，再運行一次，報錯了!!!!

[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)

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

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

本以為運行就ok，結果，還是報錯，這里就涉及到對gulp的另一個理解

run-sequence插件對異步任務的處理

在用這個插件讓任務有序進行后，我想進一步直觀的看到它對任務的序列化，自己寫了一個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'); 
});

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

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

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

總結

至此，我們就完成了一個簡易的基于gulp的前端工程的搭建，很多東西確實，想著并不難，做起來會出現各種各樣意想不到的問題，gulp很早就知道，都是單個任務在寫，然后用哪個執行哪個命令，直到自己寫完這個這個簡單的工程，才對gulp有了更深入的理解。

責任編輯：龐桂玉來源： segmentfault