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/

上一篇:rewrite规则中参数多于9个的处理方式 apache nginx


下一篇:Http和Https三次握手那些事