使用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就可以自動壓縮構建模塊了。