express+gulp構建項目（五）swig模板

這裏的文件負責配置swig模板引擎。

index.js

var jsonHash = require('./json_file');
var staticTag = require("./tag-static");

exports.init = function (swig) {
    swig.setExtension('static', function (input) {
        //swig.setExtension爲自定義標籤添加擴展。'static'爲自定義標籤的名字
        //input是經過模板標籤取到的值
        var hashList = {},
            output = input;

        var isJs = (/(\.js)$/).test(input);
        var isCss = (/(\.(scss|css))$/).test(input);

        if (isJs) {
            hashList = jsonHash.jsHash();
        } else if (isCss) {
            hashList = jsonHash.cssHash();
            input = input.replace(/(\.scss)$/, '.css'); //
        } else {
            hashList = jsonHash.imgHash();
        }
        //根據文件類型獲取相應的名單
        if (hashList[input]) {
            output = '/' + STATIC_URL + hashList[input];
        } else if (NODE_ENV === 'dev' && isCss || isJs) {
            output = '/' + STATIC_URL + input;
        } else {
            output = '/' + STATIC_URL + input;
        }
        //肯定文件名和路徑

        return output;
    });

    swig.setTag('static', staticTag.parse, staticTag.compile, staticTag.ends, staticTag.blockLevel);
    // parse自定義解析函數，compile自定義編譯函數，ends是否須要結束標籤，blockLevel若是是false，則它不會被編譯到block外面當它繼承一個父模板的時候
};

json_file.js

var jsonfile = require('jsonfile');
var csshashFile, jsHashFile, imgHashFile;
var cssCompressed, jsCompressed, imgCompressed;
var isDev = NODE_ENV === 'dev';

try {
    csshashFile = jsonfile.readFileSync('./hash/css_hash.json');
    //讀取hash名單，若是能夠讀取到json文件，說明已經執行過gulp build任務，在hash文件夾下生成相應的名單文件
    cssCompressed = true;
} catch (e) {
    csshashFile = {};
}

try {
    jsHashFile = jsonfile.readFileSync('./hash/js_hash.json');
    jsCompressed = true;
} catch (e) {
    jsHashFile = {};
}

try {
    imgHashFile = jsonfile.readFileSync('./hash/img_hash.json');
    imgCompressed = true;
} catch (e) {
    imgHashFile = {};
}

exports.cssHash = function () {
    var file = isDev ? (cssCompressed ? jsonfile.readFileSync('./hash/css_hash.json') : csshashFile) : csshashFile;
    var json = {};

    for (var key in file) {
        var l = key,
            r = file[key];

        json['/' + l] = '/' + STATIC_FILES_OUTPUT + '/' + r; //取出名單存入對象並返回
    }

    return json;
};

exports.jsHash = function () {
    var file = isDev ? (jsCompressed ? jsonfile.readFileSync('./hash/js_hash.json') : jsHashFile) : jsHashFile;
    var json = {};

    for (var key in file) {
        var l = key,
            r = file[key];

        json['/' + l] = '/' + STATIC_FILES_OUTPUT + '/' + r;
    }

    return json;
};

exports.imgHash = function () {
    var file = isDev ? (imgCompressed ? jsonfile.readFileSync('./hash/img_hash.json') : imgHashFile) : imgHashFile;
    var json = {};

    for (var key in file) {
        var l = key,
            r = file[key];

        json['/' + l] = '/' + STATIC_FILES_OUTPUT + '/' + r;
    }

    return json;
};

tag-static.js

exports.parse = function (str, line, parser, types, options) {
    var matched = false;
    parser.on('*', function (token) {
        if (matched) {
            throw new Error('Unexpected token ' + token.match + '.');
        }
        matched = true;
        return true;
    });

    return true;
};

exports.compile = function (compiler, args, content, parents, options, blockName) {
    return '_output += _ext.static(' + args[0] + ');';
};

exports.ends = false;
exports.blockLevel = false;

swig模板通過這一系列的配置是什麼樣的效果呢？

原來在gulp任務裏經過gulp-rev-all-fixed的處理後，給全部的靜態文件的文件名加上了哈希值，而且若是文件有變化，哈希值文件名就就會變化。

就像這樣，擴展名以前的六位就是哈希值的名字，會隨文件的變更而變化。

而後咱們自定義的static swig標籤就是爲了處理文件引用時文件名的問題，當咱們寫html的時候，引入的文件都用自定義標籤來寫。

<link rel="stylesheet" href="{% static '/css/base.scss' %}" />
<link rel="stylesheet" href="{% static '/widget/global/fonts/font-awesome/font-awesome.min.css' %}">

當swig編譯html的時候看到自定義標籤就會去找hash文件夾下的名單文件，名單文件裏是一個對象，是源文件名對應改變後的哈希文件名，而後根據規則替換，引入的文件就不會由於名字不對而報錯了。css樣式裏的背景圖片的url也會被替換。作這樣設置的緣由是爲了防止瀏覽器緩存靜態文件。