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

时间: 12-20

express+gulp构建项目(五)swig模板的相关文章

express+gulp构建项目(一)项目目录结构

express是基于nodejs平台的web框架,它可以让我们快速开发出web引用.而gulp是一种自动构建工具,非常强大,有了它,能帮我们完成很多繁琐的工作,例如,静态文件的压缩,为静态文件加上哈希值的命名以防止缓存等等. 环境安装 若要使用express框架和gulp,首先要安装nodejs环境,因为安装了nodejs环境,才能使用npm包管理器来下载express和gulp. nodejs到官方网站下载即可,现在一般项目中使用4.6的稳定版本. 项目大体结构 从这个图中我们可以很清楚的看出

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由

前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了.制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了. 本章讲一下如何配置子路由,因为我们的项目不可能只有一个页面,而是由众多页面构成的. 新建子路由页面 在第二节中,我们新建了一个src/frame/subroute.vue的子页面.当时是留空放在那里的.这里,我们给它填写上内容,代码如下: <template> <div> <div class="mai

2016-7-15(1)使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依 靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查.合并.重命名.压缩.格式 化.浏览器自动刷新.部署文件等功能. gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入.下面是具体流程: 1.安装nodejs nodejs下载地址:https://nodejs.org/ nodejs自带

gulp进阶构建项目由浅入深

阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gulp-concat(JS文件合

Gulp构建Android项目,安装APK

Gulp构建Android项目,安装APK 上一节Gulp安装及使用这篇文章中说到,Gulp可以执行终端命令,是不是有很多想法呢,:) 这篇没有多少技术性,仅供娱乐 测试环境 Mac:10.10.4 Gulp:3.9.0 Android studio:1.3 time:2015年08月21日17:29:07 前提 整个Android项目在Android studio中已经编译好,可以正常运行.如果没有编译好的话,只能是在终端输出错误日志了. 文件目录 root |----gulpfils.js

使用 gulp 构建一个项目

本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片 使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目 并将之前所有章节的内容组合起来编写一个前端项目所需的 gulp 代码. 若你不了解npm 请务必阅读 npm模块管理器

使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查.合并.重命名.压缩.格式化.浏览器自动刷新.部署文件等功能. gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入.下面是具体流程: 1.安装nodejsnodejs下载地址:https://nodejs.org/ nodejs自带npm

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统.基于webpack构建,并进行默认配置,可通过插件扩展,可升级: vue-cli帮我们创建基本项目结构,跳过繁琐的项目配置环节,将精力集中在业务上: vue-cli的版本: @vue/cli 3.x版本:点击前往官网 vue-cli 2.x版本:点击前往官网 安装vue-cli $ npm install -g vue-cli 安装成功,查看其版本: 使用we