GruntJs安装及使用入门（自定义grunt任务,合并压缩js、css）

 

 

一、Grunt.js简介（实现自动化）

1）简要说明：

　　1.GruntJs是基于node的javascript命令行工具，可以自动化构建、测试、生成文档的项目管理工具；

　　2.使用GruntJs可以自动化的管理子任务的运行；

　　3.很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等

2）使用原因：

　　1.合并js文件——为了明确模块分工，可能会将Javascript代码拆成很小很小的一个个js文件，为减少Http Request我们需要合并js文件

　　2.压缩js文件、css文件等，从而减小请求的文件。

　　3.源代码测试

　　4.将备注自动生成文档

 

二、GruntJs安装

　　1.安装node，npm（最新版本的node会自动安装npm）

　　2.安装命令行工具grunt-cli——npm install -g grunt-cli(-g 全局安装)

　　3.安装grunt及其插件——npm install --save -dev （安装完成后可以使用grunt -version查看版本）

　　4.若之前安装过旧版本的grunt可以使用npm unistall -g grunt-cli卸载

 

三、package.json文件说明

1)说明：package.json是项目配置文件，包括项目的依赖信息，以及作者、版本等信息

2)例子：

{
  "name": "myProject",
  "version": "0.1.0",
  "author": "@wish",
  "devDependencies": {               //项目的依赖
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1", //校验，语法检查
    "grunt-contrib-uglify": "~0.1.2", //压缩
    "grunt-contrib-concat": "~0.1.1"  //合并文件
  }
}

 

四、利用grunt压缩JS文件/合并JS文件

1）在node安装路径下建立工程 testJsUglify

2）配置package.json文件，放置在工程的根目录

  "name": "testJsUglify",
  "version": "0.1.0",
  "author" : "@wish",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"
  }
}

3）安装工程的依赖插件（package.json中配置的信息）

　　命令行中进入工程根目录，执行命令：npm install

　　工程testJsUglify根目录中增加了node_modules目录，包含grunt、grunt-contrib-concat、grunt-contrib-jshint、grunt-contrib-uglify四个子目录

4）将需要压缩的js文件添加到工程，本例中在跟目录下建立assets文件夹添加文件test1.js和test2.js

/testJsUglify/assets/test1.js
/testJsUglify/assets/test2.js

5)创建grunt任务

创建Gruntfile.js文件，放置在根目录，内容如下：

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {   //合并文件
            domop : {
                src: ['assets/test1.js', 'assets/test2.js'],  //源文件目录
                dest: 'dest/result.js'   //目标文件目录，自动创建dest目录
            }
        },
        uglify : {   //压缩文件
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'dest/result.js',
                dest : 'dest/result.min.js'
            }
        }
    });
    // 载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 注册任务
    grunt.registerTask('default', ['concat', 'uglify']);
};

6）执行grunt任务

　　工程根目录执行grunt命令，合并和压缩完成，在dest目录中即可看见result.js和result.min.js文件

 

五、使用grunt合并压缩CSS文件

说明：合并和压缩过程类似js文件，下面详细说明：

1）创建工程testGruntCSS

2）配置package.json文件，放置工程的根目录

{
    "name":"testGruntCSS",
    "version": "0.1.0",
     "author" :"@wish",
     "devDependencies":{
     "grunt":"~0.4.0",
     "grunt-contrib-concat":"~0.1.1",
     "grunt-css":">0.0.0"    
    }  
}

3)安装依赖插件 工程根目录执行 npm install

根目录中增加文件夹node_modules,子目录分别为grunt，grunt-contrib-concat和grunt-css文件夹

4）将需要合并和压缩的css文件添加到工程

/testGruntCSS/assets/css1.css
/tetGruntCSS/assets/css2.css
/tetGruntCSS/assets/css3.css

5)工程根目录下新建Gruntjs文件，内容如下：

module.exports = function(grunt){
    grunt.initConfig(
    {
        pkg:grunt.file.readJSON('package.json'),
        concat:{
              css:{
                    src:['assets/*.css'],
                    dest:'dest/all.css',
                    }
               },  
   cssmin: {

            css: {

                src: 'dest/asset/all.css',

                dest: 'dest/asset/all-min.css'

            }

        }

    });
    // 载入concat和css插件
    grunt.loadNpmTasks('grunt-contrib-concat');//用于合并
    grunt.loadNpmTasks('grunt-css');//用于压缩
    grunt.registerTask('default',['concat','cssmin']);//任务

6)执行grunt任务

进入工程根目录，执行grunt命令，合并压缩完毕

进入dest目录即可看见all.css文件和all.min.css文件

 

六、自定义Grunt任务

1）新建工程defineGrunt

2）工程根目录配置package.json文件

{

    "name": "defineGrunt",

    "version": "0.1.0",

    "author": "@wish",

    "devDependencies": {

        "grunt": "~0.4.0"

    }

} 

3)安装依赖插件grunt  

  工程根目录输入 npm install

4) 自定义任务，根目录创建Gruntfile.js文件，内容如下：

module.exports = function(grunt){
   grunt.registerTask('myGrunt','输出不同参数',function(arg1,arg2){
          if(arguments.length === 0){
                grunt.log.writeln('任务'+this.name+'没有传参数');
          }else if (arguments.length === 1) {

            grunt.log.writeln('任务' + this.name + "有一个参数是" + arg1);

        } else {

            grunt.log.writeln('任务' + this.name + "有两个参数分别是" + arg1 + ", " + arg2);
    })
};

5)测试任务

　　1.进入工程目录，输入grunt myGrunt ,输出：任务myGrunt没有传参数；

　　2.进入工程目录，输入grunt myGrunt:argument1 ,输出：任务myGrunt有一个参数是argument1；

　　3.进入工程目录，输入grunt myGrunt:argument1:argument2 ,输出：任务myGrunt有两个参数，分别是argument1, argument2；

 

 参考：http://home.cnblogs.com/u/snandy/

转载于:https://www.cnblogs.com/wishyouhappy/p/3647015.html