grunt模块化配置

来源：互联网发布：2017福利彩票中奖软件编辑：程序博客网时间：2024/05/22 04:48

一、简介

构建工具的作用：

在项目部署上线前，通常要将源文件压缩，合并，并拷贝到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

0 0