快速开发Grunt插件----压缩js模板

前言

Grunt是一款前端构建工具，帮助我们自动化搭建前端工程。它可以实现自动对js、css、html文件的合并、压缩等一些列操作。Grunt有很多插件，每一款插件实现某个功能，你可以通过npm命名去下载插件，然后使用它们。关于grunt的使用以及配置，卤煮不打算在此介绍。本篇博文重点要讲的是如何快速开发一款自定义的grunt插件。因为卤煮在打包合并代码的时候发现了无法将html和js混合的文件进行压缩处理，为此卤煮也翻了很多资料，没查找到理想的解决方案。在山穷水复之时，硬着头皮自己开发了一个简单的插件。在这里分享出来给诸位，望对正在使用grunt构建工具的诸君能有所帮助。

创建插件

1通过

npm install -g grunt-init

命令安装 grunt-init 。

2通过

git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin

命令安装grunt插件模版。

3在一个空的目录中执行

grunt-init gruntplugin

。

4执行

npm install

命令以准备开发环境。

在执行到第三步的时候会出现若干选择让你填写，这些选项都是初始化插件时的配置选项。把你的插件名称和github替换本地地址填上外其他的都可以选择默认。然后我们得到了一个默认的插件模块工程目录。如下所示：



其中Gruntfile.js是当前模块需要的依赖，你需要的是在tasks中的js文件中编写自己的插件。

编写插件

一个插件是可以配置的，在开发插件之前，你需要了解一些执行参数和配置。假设你的插件放入到了工程中去了，那么在该工程的gruntfile文件中必须写上要加载的插件并且给他参数，告诉这个插件怎么样处理哪些文件。此处仍然以压缩js和html混合代码的html文件为例子，展示我们编写插件时的基础配置：

module.exports = function(grunt) {

// 构建任务配置
grunt.initConfig({

//读取package.json的内容，形成个json数据
pkg: grunt.file.readJSON('package.json'),
//压缩模板文件
htmlmin: {
options: {
a:1,
b:2,
c:3
},
html: {
expand: true,
cwd: 'js/tpl/',
src: ['*.html'],
dest: 'js/html_min/'
}
}

});

// 加载指定插件任务
grunt.loadNpmTasks('grunt-htmlmin');

// 默认执行的任务
grunt.registerTask('default', ['htmlmin']);

};

我们可以看到在配置文件中有了若干的配置项，那么我们在自己开发的htmlmin插件中怎么样读取呢。对于options我们可以在自己的插件中用this.options获取到，其他html对象中的配置是直接作为文件的默认属性而引用的。

/*
* template-uglify
* https://github.com/烧炭党人-申包胥/grunt-plugin *
* Copyright (c) 2016 chen.y
* Licensed under the MIT license.
*/

'use strict';

module.exports = function(grunt) {

// Please see the Grunt documentation for more information regarding task
// creation: http://gruntjs.com/creating-tasks //开始注册任务
grunt.registerMultiTask('htmlmin', 'uglify these html template', function() {
// Merge task-specific and/or target-specific options with these defaults.此处即为options中的参数默认配置项，上面的a b c都会传入其中
var options = this.options({
punctuation: '',
separator: ', '
});

// Iterate over all specified file groups.
this.files.forEach(function(f) {
// Concat specified files.
var src = f.src.filter(function(filepath) {
// Warn on and remove invalid source files (if nonull was set).
if (!grunt.file.exists(filepath)) {
grunt.log.warn('Source file "' + filepath + '" not found.');
return false;
} else {
return true;
}
}).map(function(filepath) {
// Read file source.
return grunt.file.read(filepath);
}).join(grunt.util.normalizelf(options.separator));

// Handle options.src未文件内容的字符串
src += options.punctuation;
//此处为添加的业务，将读取到的文件内容压缩
src = src.replace(/\r\n/g, '').replace(/\s+/g, ' ').replace(/>\s+(?=<)/g, '$1');
// 将处理后的文件存入目标位置 dest是上文中配置的路径/js/html_min/
grunt.file.write(f.dest, src);

// Print a success message.
grunt.log.writeln('File "' + f.dest + '" created.');
});
});

};

发布插件

现在，你的基本的插件以及完成。通过本地测试后你可以执行

npm publish

命令将你创建的 Grunt 插件提发布npm！为了检验插件，我们将一个html为后缀名的html文件进行压缩：

<!--消费订单-->
<script id="tplmenu" type="text/template">
<footer class="bottom">
<%for(var i=0; i<globalConfig.menu.length; i++){%>
<div class="box <%if(globalConfig.menu[i].sub_button.length > 0){%>haschild<%}%>" data-url="<%=globalConfig.menu[i].url%>">
<div><%=globalConfig.menu[i].name%></div>
<%if(globalConfig.menu[i].sub_button.length > 0){%>
<ul class="hidelist">
<%for(var n=0; n<globalConfig.menu[i].sub_button.length; n++){%>
<a href="<%=globalConfig.menu[i].sub_button
.url%>"><%=globalConfig.menu[i].sub_button
.name%></a>
<%}%>
</ul>
<%}%>
</div>
<%}%>
</footer>
</script>

配置gruntfile文件cwd:'source',src:['*.html'], dest:'target',执行grunt命令，得到压缩后的html:

<!--消费订单--><script id="tplmenu" type="text/template"><footer class="bottom"><%for(var i=0; i<globalConfig.menu.length; i++){%><div class="box <%if(globalConfig.menu[i].sub_button.length > 0){%>haschild<%}%>" data-url="<%=globalConfig.menu[i].url%>"><div><%=globalConfig.menu[i].name%></div><%if(globalConfig.menu[i].sub_button.length > 0){%><ul class="hidelist"><%for(var n=0; n<globalConfig.menu[i].sub_button.length; n++){%><a href="<%=globalConfig.menu[i].sub_button
.url%>"><%=globalConfig.menu[i].sub_button
.name%></a><%}%></ul><%}%></div><%}%></footer></script>

参考文档

http://www.gruntjs.net/creating-plugins

http://www.gruntjs.net/api/grunt

如何编写grunt 插件

Grunt 插件开发与调式