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构建前端自动化项目

类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果: 另一个页面: 要求: Node.js gulp.js bower 下载项目代码于本地, 进入该目录,执行如下命令: 1 cd my-demo2 npm install 3 bower install 安装完成之后,运行如下命令: 1 gulp 现在项目已经跑起来了,所有在src目录下的文件都会编译生成相应的文件,并存入build文件夹下,同时,src目录下的文件发生变化时,会新生成相应的文件,并且已经启动

Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构

通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目录以及文件结构 如图所示: 如上图所示,自动构建的vue项目的结构就是这样. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 项目开发依赖的一些模块 src 开发目录(

django开发个人简易Blog——构建项目结构

开发之前第一步,就是构造整个的项目结构.这就好比作一幅画,第一步就是描绘轮廓,有了轮廓,剩下的就是慢慢的填充细节.项目结构规划如下图: 项目结构描述: 本项目以fengzhengBlog为根目录. admin.blogapp是两个app目录,用于实现项目主要功能:包括模型定义.视图定义等 css.js.images分别为样式文件.js.图片的静态文件存放目录. template目录存放模板文件. ueEditor是富文本编辑器uEditor的目录. settings.py是全局配置文件,urls

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <

Gulp构建前端自动化工作流之:常用插件介绍及使用

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <