前端自动化构建工具Grunt

一、了解Gurnt

Grunt 是一个基于任务的JavaScript工程命令行构建工具。

Grunt和Grunt插件，是通过npm安装并管理的，npm是Node.js的包管理器。

了解Grunt前，首先要准备两件事：

1、了解npm（Node Package Manager）：npm是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

2、安装node：进入nodejs官网（https://nodejs.org/），单击INSTALL下载node安装包，默认安装。安装完成后，进入对应目录，会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。

二、安装Grunt

参考Grunt官网http://www.gruntjs.net/

安装Grunt：npm install -g grunt-cli

注意，安装grunt-cli并不等于安装了Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的Grunt。

三、简单实用Grunt

一个新的Grunt项目，必须在根目录下要有两个文件：package.json 和 Gruntfile.js

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。

1. npm init命令会创建一个基本的package.json文件。或者手动创建，如下：

[javascript] view
plain copy

{  

  "name": "my-project-name",  

  "description":"test grunt ...",  

  "version": "0.1.0"  

}  

2. 安装Grunt和Grunt插件（https://github.com/gruntjs）

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过：

npm install <module> --save-dev。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中。

3. grunt --help 命令将列出所有可用的任务

四、简单项目流程示例

清空编译工作区 -> copy源文件到编译工作区 -> 合并文件 -> 压缩文件 -> 加时间戳

clean -> copy -> concat -> min -> md5 

1. grunt-contrib-clean：Clear files and folders.

2. grunt-contrib-copy：Copy files and folders.

3. grunt-contrib-concat：Concatenate files.

4. grunt-contrib-cssmin：Compress CSS files.

   grunt-contrib-uglify：Minify files with UglifyJS.

   grunt-contrib-htmlmin：Minify HTML.

5. grunt-filerev：Static asset revisioning through file content hash

第一步：创建package.json

[javascript] view
plain copy

{  

    "name":"test_grunt",  

    "description":"test grunt ...",  

    "version":"0.0.1"  

}  

第二步：安装对应插件（加上--save-dev，会在package.json中加上devDependencies依赖）

[javascript] view
plain copy

npm install grunt-contrib-clean --save-dev  

npm install grunt-contrib-copy --save-dev  

npm install grunt-contrib-concat --save-dev  

npm install grunt-contrib-cssmin --save-dev  

npm install grunt-contrib-uglify --save-dev  

第三步：创建Gruntfile.js，添加要使用插件配置

[javascript] view
plain copy

'use strict';  

module.exports = function(grunt) {  

    // 构建的初始化配置  

    grunt.initConfig({  

        //配置具体任务  

    });  

  

  

    // 载入要使用的插件  

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

  

  

    // 注册刚配置好的任务  

    grunt.registerTask('default', ['clean']);  

}  

五、地址

nodejs官网地址：https://nodejs.org/

grunt中文官网地址：http://www.gruntjs.net/

grunt官网插件地址：https://github.com/gruntjs

六、源码

// package.json

[javascript] view
plain copy

{  

    "name": "test_grunt",  

    "description": "test grunt ...",  

    "version": "0.0.1",  

    "devDependencies": {  

        "grunt": "^0.4.5",  

        "grunt-contrib-clean": "^0.6.0",  

        "grunt-contrib-concat": "^0.5.1",  

        "grunt-contrib-copy": "^0.8.0",  

        "grunt-contrib-cssmin": "^0.12.3",  

        "grunt-contrib-uglify": "^0.9.1"  

    }  

}  

//Gruntfile.js

[javascript] view
plain copy

'use strict';  

module.exports = function(grunt) {  

    // 构建的初始化配置  

    grunt.initConfig({  

        /* 配置具体任务 */  

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

        dirs: {  

            src: 'path',  

            dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',  

        },  

        // clean任务（删除dest/test_grunt/0.0.1 目录下非min的文件）  

        clean: {  

            js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"],  

            css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"]  

        },  

        // copy任务（拷贝path目录下的文件到dest目录）  

        copy: {  

            main: {  

                files: [  

                  // includes files within path  

                  {expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isFile'},  

                ]  

            }  

        },  

        // concat任务（将dest目录下的a.js和b.js合并为built.js）  

        concat: {  

            options: {  

                separator: '\n',  

            },  

            concatCSS: {  

                src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],  

                dest: '<%= dirs.dest %>/built.css',  

            },  

            concatJS: {  

                src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],  

                dest: '<%= dirs.dest %>/built.js',  

            }  

        },  

        // cssmin任务（压缩css）  

        cssmin: {  

            target: {  

                files: [{  

                    expand: true,  

                    cwd: '<%= dirs.dest %>',  

                    src: ['*.css', '!*.min.css'],  

                    dest: '<%= dirs.dest %>',  

                    ext: '.min.css'  

                }]  

            }  

        },  

        // uglify任务（压缩js）  

        uglify: {  

            options: {  

                mangle: {  

                    except: ['jQuery', 'Backbone']  

                }  

            },  

            my_target: {  

                files: {  

                    '<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js']  

                }  

            }  

        }  

    });  

  

    // 载入要使用的插件  

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

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

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

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

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

  

    // 注册刚配置好的任务  

    grunt.registerTask('cls', ['clean']);  

    grunt.registerTask('cpy', ['copy']);  

    grunt.registerTask('con', ['concat']);  

    grunt.registerTask('cmpCSS', ['cssmin']);  

    grunt.registerTask('cmpJS', ['uglify']);  

  

    grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']);  

}  

PS：

1.  自己配置的任务名称，不能和插件名称一样，否则会造成无限循环

2.  插件名称，除最外层外，中间层名称可自定义

版权声明：本文为博主原创文章，未经博主允许不得转载。转载请标明出处：http://blog.csdn.net/ligang2585116！