一個小型項目的前端構建方案

首先，給大家說明一下這次項目的背景，是針對於一個用smarty模板引擎寫的開放平台的UI改版工作，需求比較急。原始架構是基於php yii框架，前后端代碼雜糅在一起，邏輯也較為混亂，以下是其基本目錄結構：

基本的業務代碼是在websites文件目錄下，assets文件夾目錄下存儲了一些靜態文件資源。鑒於以上幾個原因，最后定的方案是，不進行html代碼的重構，只進行css代碼的樣式覆蓋並采用less語言進行開發從而提高效率。

方案確定好了，接下來就是確定前端的一個基本的構建方案，要解決的問題有這么幾個：

1、less文件的代碼組織方式。

2、less文件的編譯打包，你自然不能把一堆less文件扔到線上讓less.min.js去進行編譯解析。

3、緩存問題，為了最大程度的提升性能，我們需把每次上線的新版本文件加戳，從而不讀取緩存獲取最新的代碼。關於緩存這方面的知識可以參考https://my.oschina.net/jathon/blog/404968 一文。

針對於第一個問題，最終采用的方案是根據less本身函數注入、導入、變量等特性而采取組件化開發的思想，對於整個項目進行公用部分的拆分，針對性的對每一個組件單獨抽離出相應的less文件樣式。最終的目錄結構如下：（圖一所示）

       

               圖一                                                  圖二                                                                              圖三

在d_theme_main.less文件中是對各組件文件的引用，如圖二所示。本次UI改版的樣式文件引用在lib.tpl文件下，如圖三所示。

針對於第二、三個問題我們放在一起進行解決。

與其他項目不同的是，本次項目開發沒有開發、生產環境之分，不存在輸出目錄的概念。我們要做的就是：

1、實現對於less文件的編譯打包壓縮，對於各組件的less文件將最終編譯打包到一個css文件里。

2、實現對lib.tpl文件中對css文件引用的加戳，從而解決緩存問題。

我們用的是gulp前端自動化工具，將在項目根目錄下創建gulpfile.js文件，並安裝相應的項目依賴。

第一個問題相對來說好解決，gulpfile.js代碼如下：

//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less'),
    rev = require('gulp-rev'),
    nodepath = require('path'),
    through = require('through2'),
    gutil = require('gulp-util'),
    inject = require('gulp-inject'),
    cleanCSS = require('gulp-clean-css'),
    assetRev = require('gulp-asset-rev'),
    revCollector = require('gulp-rev-collector'),
    revReplace = require("gulp-rev-replace");

var path = {
        app: process.cwd(), //當前app的目錄路徑
        basePath: './datawork/websites/visual', //基礎目錄
        lessPath: './datawork/websites/visual/assets/css/theme/', //需打包編譯的less路徑和產出css文件的目錄

    }
//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function() {
    gulp.src(path.lessPath + 'd_theme_main.less') //該任務針對的文件
        .pipe(less()) //該任務調用的模塊
        .pipe(cleanCSS())
        .pipe(gulp.dest(path.lessPath)); //將會在src/css下生成相應的css文件
});

經過編譯測試發現結果如預期，對less文件進行編譯打包壓縮，並在當前目錄下生成相應的css文件。

接下來，編寫加戳功能和自動編譯的代碼，代碼如下所示：

//css文件生成hash編碼並生成rev-manifest.json文件名對照映射
gulp.task('revCss',['testLess'], function() {
    return gulp.src(path.lessPath + 'd_theme_main.css')
        .pipe(rev())  //針對相應的css文件生成md5戳
        .pipe(rev.manifest()) //生成rev-manifest.json文件
        .pipe(gulp.dest('./'))  //rev-manifest.json文件的生成位置
})
//參照rev-manifest.json文件，替換相應目錄下的lib.tpl文件對於css文件的引用
gulp.task('revhtml',['revCss'], function() {
    return gulp.src(['./rev-manifest.json', path.basePath + '/protected/views/layouts/lib.tpl'])
        .pipe(revCollector())
        .pipe(gulp.dest(path.basePath + '/protected/views/layouts/'));
})


gulp.task('watch', function() {
    gulp.watch(path.lessPath + '*.less', ['revhtml']);
})
gulp.task('default', ['revhtml', 'watch']); //定義默認任務　

執行gulp命令，得到的結果如下：

根目錄下生成了manifest.json對應文件
{
  "d_theme_main.css": "d_theme_main-803a7fe4ae.css"
}

<link rel="stylesheet" href="/assets/css/theme/d_theme_main-803a7fe4ae.css">

這顯然不符合我們的預期，我們並不需要在相應的目錄下生成d_theme_main-803a7fe4ae.css文件同時改變tpl文件中的引用，我們只需要在相應的引用后面加戳即可。

更改gulp-rev和gulp-rev-collector

打開node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打開nodemodules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新為: return filename + ext;

打開node_modules\gulp-rev-collector\index.js 31行 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) { 更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

打開node_modules\gulp-assets-rev\index.js 78行 var verStr = (options.verConnecter || "-") + md5; 更新為：var verStr = (options.verConnecter || "") + md5; 80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1"); 更新為：src=src+"?v="+verStr;

再執行gulp命令，得到的結果如下(效果正確):

<link rel="stylesheet" href="/assets/css/theme/d_theme_main.css?v=afd12860ab">

但是假如我們更改了css和js后，再執行gulp命令，得到的結果會如下:

<link rel="stylesheet" href="/assets/css/theme/d_theme_main.css?v=afd12860ab?v=803a7fe4ae">

有沒有發現，會在版本號后面再添加一個版本號，因為gulp只替換了原來文件名，這樣又不符合預期效果了，所以我們想到，還需要修改插件的替換正則表達式。

4、繼續更改gulp-rev-collector

打開node_modules\gulp-rev-collector\index.js 第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ), 更新為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),

現在你不管執行多少遍gulp命令，得到的html效果都是

<link rel="stylesheet" href="/assets/css/theme/d_theme_main.css?v=86f020d88a">

至此，一個較為完善的一個方案就誕生了，但是還有優化的地方嗎，答案自然自然是有的，假如這時又有其他人介入此項目的開發，你總不能讓他們根據你的文檔去修改相應插件的源碼吧，於是進行以下修改：

//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less'),
    rev = require('gulp-rev'),
    nodepath = require('path'),
    through = require('through2'),
    gutil = require('gulp-util'),
    inject = require('gulp-inject'),
    cleanCSS = require('gulp-clean-css'),
    revReplace = require("gulp-rev-replace");

var path = {
        app: process.cwd(), //當前app的目錄路徑
        basePath: './datawork/websites/visual', //基礎目錄
        lessPath: './datawork/websites/visual/assets/css/theme/', //需打包編譯的less路徑和產出css文件的目錄

    }
    //定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function() {
    gulp.src(path.lessPath + 'd_theme_main.less') //該任務針對的文件
        .pipe(less()) //該任務調用的模塊
        .pipe(cleanCSS())
        .pipe(gulp.dest(path.lessPath)); //將會在src/css下生成index.css
});

gulp.task('rev', ['testLess'], function() {
    return gulp.src([path.lessPath + 'd_theme_main.css'])
        .pipe(rev())
        .pipe(function() {
            var hashes = {},
                oPath = '';
            var collect = function(file, enc, cb) {
                if (file.revHash) {
                    var filename = nodepath.basename(file.revOrigPath);
                    hashes[filename] = filename + '?v=' + file.revHash;
                    oPath = file.base;
                }
                return cb();
            }

            var emit = function(cb) {
                if (oPath) {
                    var file = new gutil.File({
                        base: oPath,
                        cwd: process.cwd(),
                        path: nodepath.resolve(oPath, 'rev-manifest.json')
                    });
                    file.contents = new Buffer(JSON.stringify(hashes, null, 4));
                    this.push(file);
                }
                return cb();
            }
            return through.obj(collect, emit);
        }())
        .pipe(gulp.dest(path.app))
        .pipe(rev.manifest())
})

gulp.task('revCollector', ['rev'], function() {
    var manifest = gulp.src([nodepath.resolve(path.app, 'rev-manifest.json')]);
    var cssPath = nodepath.resolve(path.lessPath, 'd_theme_main.css');

    return gulp.src([path.basePath + '/protected/views/layouts/lib.tpl'])
        .pipe(inject(gulp.src(cssPath, {read: false}), {
            transform: function (filepath, file, i, length) {
                var fpath = ['/assets', filepath.split('assets')[1]].join('');
                return '<link rel="stylesheet" href="'+fpath+'">';
            }
        }))
        .pipe(revReplace({ 
            manifest: manifest,
            replaceInExtensions: ['.tpl']
        }))
        .pipe(gulp.dest(path.basePath + '/protected/views/layouts/'));
})

gulp.task('watch', function() {
    gulp.watch(path.lessPath + '*.less', ['revCollector']);
})


gulp.task('default', ['revCollector', 'watch']); //定義默認任務


//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑

至此，一個更為完善的前端構建方案就誕生了。