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































评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值