grunt模块化配置

一、简介

      构建工具的作用：

     

     在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。

     在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。

     解决这一系列繁重工作的自动化工具，称之为构建工具。

      

     任务流程：

     

     task:clean

     

     task:uglify

     

     task:qunit

     task:concat

二、安装与构建

     

     1、安装nodejs和npm。（window下集成npm，linux下就需要考虑手动在/usr/sbin/下配置相应的引用路径。

     2、安装grunt CLI与grunt

          

          npm install -g grunt-cli 出现错误时 采用npm install grunt-cli --save-dev

          参考地址：http://stackoverflow.com/questions/20555605/how-can-i-install-the-grunt-cli-without-getting-errors

          npm install grunt --save-dev

     linux下安装完grunt之后，会出现-bash: grunt: command not found

     

     vim ~/.bash_profile

     加入这句话：export PATH=/home/brianzheng/node_modules/grunt-cli/bin:$PATH

      source ~/.bash_profile 

      grunt --version 进行测试

     

     3、在项目中使用grunt

           3-1) 在项目中添加两个文件：package.json和Gruntfile.js

          3-1-1) package.json格式示例：

{
    "name": "tes",
    "version": "1.0",
    "description": "merge css and js",
    "author": "brianzheng",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "~0.3.0",
        "grunt-contrib-concat": "~0.1.1",
        "grunt-contrib-uglify": "~0.1.2",
        "grunt-contrib-cssmin": "~0.5.0",
        "grunt-htmlhint": "~0.9.2"
    }   
}

package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，插件等。它应该和源码一样被提交到svn或git。

          

          3-1-2) 在项目中安装常用的插件

grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查）、grunt-contrib-clean（清除文件）

在项目中执行：npm install grunt-contrib-jshint， 安装剩余插件类似 npm install 插件名， 安装完成后：在node_modules目录下，会包含相应的插件目录。

          Gruntfile.js：

3-2）Gruntfile.js ：

3-2-1)、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

    module.exports = function(grunt) {
      // Do grunt-related things in here
    };

3-2-2)、项目和任务配置

3-2-3）载入grunt插件和任务

3-2-4）定制执行任务

示例文件如下：

module.exports = function(grunt) {                         
    // 1.配置参数
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),    

        // js删除文件
        clean: {
            js: [ "build/js-min/*.js" ],

            css: [ "build/css-min/*.css" ]
        },
        // js文件合并
        concat: {
            options: {
                separator: ";",
                stripBanners: true,
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            base: {
                src: [
                    "doc/js/jquery-1.11.1.min.js",
                    "doc/js/common.js",
                    "doc/js/header.js"
                ],
                dest: "build/js/js-base.js"
            },
            extras: {
                src: [
                    "doc/js/render-grid.js",
                    "doc/js/popwin.js",
                    "doc/js/slider.js"
                ],
                dest: "build/js/js-plugin.js"
            }
        },

        // js压缩文件
        uglify: {
            options: {
            },
            base: {
                files: {
                    "build/js-min/js-base<%= grunt.template.today('yyyymmdd-HHMMss') %>.js":
"build/js/js-base.js"
                }
            },
            extras: {
                files: {
                    "build/js-min/js-plugin<%= grunt.template.today('yyyymmdd-HHMMss') %>.js
": "build/js/js-plugin.js"
                }
            }
        },

        // css合并压缩
        cssmin: {
            options: {
                keepSpecialComments: 0
            },
            compress: {
                files: {
                    "build/css-min/css-base<%= grunt.template.today('yyyymmdd-HHMMss') %>.cs
s": [
                        "doc/css/reset.css",
                        "doc/css/common.css"
                    ]
                }
            }
        }
    });

    // 2.载入插件
    // js合并插件
    grunt.loadNpmTasks("grunt-contrib-concat");
    // js压缩插件
    grunt.loadNpmTasks("grunt-contrib-uglify");
    // css压缩插件
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    // 清除文件
    grunt.loadNpmTasks("grunt-contrib-clean");

    // 3.注册任务
    grunt.registerTask("default", ["clean", "concat", "uglify", "cssmin"]);
}

     执行单个任务：grunt concat

     出现错误：

>> Local Npm module "grunt-contrib-concat" not found. Is it installed?

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?

>> Local Npm module "grunt-contrib-cssmin" not found. Is it installed?

Warning: Task "concat" not found. Use --force to continue.

     检查该项目模块里面是否包含node_modules，并且是否已经安装有该系列插件

          

     成功状态提示：

          Running "concat:dist" (concat) task

File build/js/js-base.js created.
Done, without errors.

     pkg：grunt.file.read.JSON('package.json')：读取package.json已经定义的值

     

      concat是一个合并任务（task），该插件主要负责提取模块中的依赖，并为每个模块设置模块ID。

     src：被执行的文件

     dest：生成的文件放置的位置

     

     多任务文件合并示例：

        concat: {
            options: {
                separator: ";",
                stripBanners: true,
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            }, 
            base: {
                src: [
                    "doc/js/jquery-1.11.1.min.js",
                    "doc/js/common.js",
                    "doc/js/header.js"
                ], 
                dest: "build/js/js-base<%= grunt.template.today('yyyymmdd-HHMMss') %>.js"
            }, 
            extras: {
                src: [
                    "doc/js/render-grid.js",
                    "doc/js/popwin.js",
                    "doc/js/slider.js"
                ], 
                dest: "build/js/js-plugin<%= grunt.template.today('yyyymmdd-HHMMss') %>.js"
            }, 
            dist: {
                src: [
                    "doc/js/popwin.js",
                    "doc/js/slider.js"
                ], 
                dest: "build/js/js-test<%= grunt.template.today('yyyymmdd-HHMMss') %>.js"
            }, 
            dist2: {
                src: [
                    "doc/js/popwin.js",
                    "doc/js/slider.js"
                ], 
                dest: "build/js/js-test<%= grunt.template.today('yyyymmdd-HHMMss') %>.js"
            }  
        }   

     uglify是一个压缩任务（task）

     option：设置参数

     build：构建产出文件

     加载两个grunt插件

     

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

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

     注册任务

     grunt.registerTask("build", ['concat', 'uglify']);

     cmd切换对应项目：

     执行： grunt build

     将grunt执行体加入到make中

     grunt:

         grunt build

     make grunt