使用Grunt进行前端模块自动压缩构建

目前正在参与开发的一个项目是采用AMD规范来组织每个模块的代码和其依赖性，每个模块包括其对应的html模板、css样式表以及Javascript文件。具体的目录结构如下图所示：

在项目发布之前，我们往往需要将项目文件比如JavaScript文件、CSS样式表等进行压缩混淆，这么做的目的主要在于减少加载文件的带宽，加快文件加载速度，同时也能在一定程度上保护源代码，提高安全性。Grunt是一个基于NodeJS的自动化构建工具，能够自动完成一些需要反复重复的任务，例如代码压缩混淆、编译、文件拷贝等。

下面本人详细介绍如何利用Grunt来实现将modules目录下的所有模块自动拷贝到dist/modules目录，并且尽可能的压缩每个模块的资源文件。

1.首先安装grunt和所需的grunt插件

要使用grunt，首先需要安装grunt-cli到全局环境中，在命令行窗口中执行如下命令：

npm install -g grunt-cli

 

然后进入项目根目录，并执行如下命令：

npm install grunt –-save-dev

这条命令是安装最新版的grunt到项目根目录，--save-dev表示将其添加到package.json文件的devDependencies内。

然后安装所需的grunt插件，并添加到devDependencies内。

npm install grunt-contrib-uglify –-save-dev
npm install grunt-contrib-cssmin –-save-dev
npm install grunt-contrib-copy –-save-dev

2.创建Gruntfile并且配置任务

 1 module.exports = function(grunt){
 2     "use strict";
 3 
 4     grunt.initConfig({
 5         pkg: grunt.file.readJSON("package.json"),
 6         copy: {
 7             module_target: {
 8                 files: [{
 9                     expand: true,
10                     cwd: "WebContent/modules",
11                     src: "**/*",
12                     dest: "WebContent/dist/modules",
13                     filter: "isFile"
14                 }]
15             }
16         },
17         cssmin: {
18             module_target: {
19                 files: [{
20                     expand: true,
21                     cwd: "WebContent/modules",
22                     src: "**/*.css",
23                     dest: "WebContent/dist/modules/",
24                     ext: ".css"
25                 }]
26             }    
27         },
28         uglify: {
29             options: {
30                 banner: "/*! <%= pkg.name %> <%= grunt.template.today('yyyy-mm-dd') %> */\n",
31                 mangle: true,
32                 compress: {
33                     drop_console: true
34                 }
35             },
36             module_target: {
37                 files: [{
38                     expand: true,
39                     cwd: "WebContent/modules",
40                     src: "**/*.js",
41                     dest: "WebContent/dist/modules",
42                     ext: ".js"
43                 }]
44             }
45         }
46     });
47 
48     grunt.loadNpmTasks("grunt-contrib-uglify");
49     grunt.loadNpmTasks("grunt-contrib-cssmin");
50     grunt.loadNpmTasks("grunt-contrib-copy");
51 
52     grunt.registerTask("default",["copy:module_target", "uglify:module_target", "cssmin:module_target"]);
53 };　

在grunt中，可以使用通配符来匹配文件路径和文件名，*匹配任意数量的字符，但不包括目录分隔符/，**匹配任意数量的字符，而且包括目录分隔符/。所以modules/**/*.js能够匹配modules目录以及其子目录中所有以.js结尾的文件。

我们将其设置为grunt的默认任务，这样在根目录使用grunt命令就能够运行该任务了。

3.利用bat批处理文件自动执行grunt任务

另外我们还可以编写一个bat文件来执行grunt任务。本人项目位于D盘jee workspace目录下，那么bat文件具体如下：

1 @echo off
2 echo minify javascript and css with grunt 
3 
4 D:
5 cd D:\\jee workspace\\myproject
6 grunt
7 
8 echo Press any key to continue....
9 pause

保存后，双击运行该bat就能够自动压缩构建模块了。

posted @ 2015-05-22 16:07  clumiere  阅读(1146)  评论(0)  编辑  收藏  举报