构建自动化

今天修改了下博客模板，顺便了解了下相关的 工具 和模块。

HEXO

辅助函数

partial(layout, [locals], [options]) 载入其他模板文件，您可在 locals 设定区域变量。

paginator(options) 插入分页链接

toc(str, [options])

__('next') 多语言支持时， __() 用于转换语言。

在模板中，透过 __ 或 _p 辅助函数，即可取得翻译后的字符串，前者用于一般使用；而后者用于复数字符串。

Grunt

构建自动化

谈 Grunt，就要谈到“构建自动化”。

Build automationis the process of automating the creation of a software build and the associated processes including: compiling computer source code into binary code, packaging binary code, and running automated tests.

构建自动化有以下一些好处：

• A necessary pre-condition for continuous integration and continuous testing 在连续集成和测试中的必要的前置条件
• Improve product quality 改善产品质量
• Accelerate the compile and link processing 加速编译和链接处理
• Eliminate redundant tasks 去除冗余的任务
• Minimize “bad builds” 减少低质量的构建
• Eliminate dependencies on key personnel 去除关键的人员依赖
• Have history of builds and releases in order to investigate issues 具有可供查询的构建和发布历史
• Save time and money - because of the reasons listed above 节省时间和财力

使用 Grunt

使用 Grunt 可以加快开发和自动构建。可以帮助开发者将压缩、编译、单元测试、代码检查等工作自动化。

三步使用 grunt：

• Change to the project’s root directory.
• Install project dependencies with npm install.
• Run Grunt with grunt.

package.json 保存项目元数据；

Gruntfile.js 配置或定义任务、加载 Grunt 插件。

npm install <module> --save-dev 本地安装并将依赖写入 package.json 中 devDependencies 。

Gruntfile.js 配置文件

Gruntfile.js 包括下面四个部分：

• The “wrapper” function
• Project and task configuration
• Loading Grunt plugins and tasks
• Custom tasks

包装函数（wrapper function）：概括 grunt 的配置信息。

module.exports = function(grunt){
};

在包装函数内，初始化配置对象：

grunt.initConfig({
});

将 package.json 的项目设置保存到 pkg 属性：

pkg: grunt.file.readJSON('package.json')

插件配置（grunt-contrib-concat 为例）：

concat: {
    options: {
        seperator: ';'
    },
    dist: {
    src: [],
    dest: ''
    }
}

加载用到的插件：

grunt.loadNpmTasks('grunt-contrib-concat');

创建任务：

直接输入 grunt 执行默认任务（default）；

输入 grunt test 可以执行自定义的任务。

grunt.registerTask('default', ['concat']);
grunt.registerTask('test', ['jshint']);

Grunt 常见插件：

grunt-contrib-uglify 压缩 js, css 文件

grunt-contrib-concat 连接文件

grunt-contrib-jshint js 代码检测

grunt-contrib-watch 代码监视

Gulp

Gulp 和 Grunt 干差不多的活，目前还不知道优劣。Gulp 显得简单一些。

var gulp = require('gulp');

gulp.task('default', function(){
  // 将你的默认的任务代码放在这
});

EJS

EJS 是一个简单的模板语言，可以让你使用原生 JavaScript 生成 HTML 标记。没有关于如何组织内容的语法规则，也没有循环和控制流的重载，只是使用原生的 JavaScript。

EJS 一个在 HTML 中嵌入原生 JS 语言的模板语言。

有以下特点：

快速的编写和解析

简单的模板标签: <% %>

自定义分隔符（例如使用替换<% %>）

使用 include 引入其他模板

同时支持服务器端和客户端使用

JavaScript 的静态缓存

模板的静态缓存

与 Express 视图系统兼容

一个简单的例子：

var ejs = require('ejs'), // 加载 ejs 模块
    people = ['geddy', 'neil', 'alex'], // 数据
    html = ejs.render('<%= people.join(", "); %>', {people: people}); // ejs 渲染

熟悉这几个标签：

• <% ‘Scriptlet’ 标签, 用于控制流，没有输出
• <%= 向模板输出值（带有转义）
• <%- 向模板输出没有转义的值
• <%# 注释标签，不执行，也没有输出
• <%% 输出字面的 ‘<%’
• %> 普通的结束标签
• -%> Trim-mode (‘newline slurp’) 标签, 移除随后的换行符

使用 include 调用的模板时路径需要 filename 选项。

JADE

JADE（现在改名为 Pugjs） 是一个极度注重代码简洁性的模板语言。相比 EJS 来说，渲染性能较低一些。但因为其简单的语法（对其他人来说也许算是“复杂”了）受到欢迎。

下面记录一些容易忘记的特殊语法：

= '\n' 换行

!= 不转义的属性

未经转义的缓存代码十分危险。您必须正确处理和过滤用户的输入来避免跨站脚本攻击。

'${}' 字符串中嵌入变量

&attributes({'data-foo': 'bar'}) 语法可以将一个对象转化为一个元素的属性列表

分支条件（Case）：case 是 JavaScript 的 switch 指令的缩写

- var foo = 10
case foo
    when 0
        p eee
    when 1
        p fff
    default
        p ggg #{foo}

分支传递 (Case Fall Through) :在 Pug 中，传递会在遇到非空的语法块前一直进行下去。如果不想输出任何东西的话，可以明确地加上一个原生的 break 语句。也可以使用块展开的语法

由 - 开始的一段为不输出的代码。另起一行并缩进可以写成块的形式。

用 = 开始一段带有输出的代码，它应该是可以被求值的一个 JavaScript 表达式。

用 != 开始一段不转义的，带有输出的代码。

用 //- 进行单行注释，使用 // 并另起一行缩进，可进行块注释。pug 的条件注释跟 html 一样，并没有特殊的写法。

条件判断形式可以省略开头的 - , if !x === unless x

if x
else if y
else
    z

模板继承： extends 关键字允许模板去扩展一个布局或父模板，这样它就可以覆盖某些预定义的内容。

包含 include 功能允许您把另外的文件内容插入进来。

Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。

Pug 允许您去替换（默认的行为）、 prepend （向头部添加内容），或者 append （向尾部添加内容）一个块。当使用 block append 或者 block prepend 时， block 关键字是可省略的

嵌入 Interpolation：Pug 提供了好几种方式满足不同的嵌入需求。

迭代 Iteration

each each ... in ... each val, index in arr

for while 也可以创建迭代

混入 Mixin：混入是一种允许您在 Pug 中重复使用一整个代码块的方法。 mixin 可以写成函数形式，传入参数。在使用 mixin 的函数形式时，在前面加上 + 号，即 +foo(faz) 。还可以使用剩余参数（rest arguments） ... 语法来表示参数列表传入若干长度不定的参数。

放置纯文本

• 管道文本：在每行加一个 | 字符。
• 标签的行内：文本只需要和标签名隔开一个空格。
• 标签中的块：在标签后街上一个 . 点号（没有空格）。