express+gulp构建项目swig模板

Posted 2020-08-24 hahazexia

这里的文件负责配置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也会被替换。做这样设置的原因是为了防止浏览器缓存静态文件。