您的位置:首页 > 其它

自动构建工具Grunt

2014-11-26 11:10 204 查看

摘要:

  大部分项目在部署之前都需要做的就是js、css文件的压缩、合并,以及一些文件的错误检查,甚至是将LESS文件转换成css文件,coffeescript文件转化成js文件等等。但是项目开发是分迭代的,没开发完一次,上面的工作要重新做一遍。那有什么工具能帮助我们来做这些重复的工作呢?Grunt就是其中一个非常好用的工具。下面就来学习一下Grunt。

安装:

  Grunt是基于node.js,所以你先安装node.js,安装完之后,只需要执行下面的命令就可以安装Grunt


npm install -g grunt-cli


参数g表示全局安装,grunt-cli表示安装的是grunt的命令行界面。

  安装完成之后,他会把Grunt配置到你的系统路径,允许其从任何目录下运行。安装完之后并不能执行操作,因为Grunt是基于模块机构,所以必须安装模块。模块是局部的,是根据项目需求来安装的。在项目的随便一个目录下(最好是根目录,也可以随便创建个目录)新建一个文件---package.json(也可以通过node init来创建),内容如下:

{
"name": "",            // 项目名称
"version": "",         // 项目版本
"private": true,       // 项目是否私有
"description": "",     //  项目描述
"main": "",            // 项目主要文件
"dependencies": {},    // 项目依赖的模块
"devDependencies": {   // 项目开发阶段依赖的模块
"grunt": "0.x.x",  // grunt模块为最新的0.x.x版
"grunt-contrib-clean": "~0.5.0", // clean插件不低于0.5.0
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-less": "~0.11.0",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-concat": "*"
},
"keywords": [],   // 项目关键字
"author": {       // 作者
"name": "",
"age": ""
},
"contributors": [],  // 贡献者
"license": ""        // 版权
}


然后在当前目录下,通过命令终端运行npm install,这时你会发现多出一个node_modules文件夹,里面就是我们安装的模块。

配置:

  Grunt和模块都已经安装完成了,下面需要做的就是创建一个配置文件,来告诉Grunt需要去哪里,然后做什么等等。在上面的目录下新建一个文件Gruntfile.js(注意大小写),内容如下:

module.exports = function(grunt) {

'use strict';

// 配置Grunt各种模块的参数
grunt.initConfig({
clean:  {
oldMinFiles: [],
afterUglify: []
},
jslint: {
command: "",
options: ""
},
concat: {

},
uglify: {

},
watch:  {

},
copy: {

},
less: {

}
});

// 从node_modules目录加载模块文件
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');

// 定义任务
grunt.registerTask('default', ['jsLint', 'concat', 'uglify']);
grunt.registerTask('check', ['jslint']);

};


只需要在当前目录执行命令

合并文件:


grunt concat


代码检查:


grunt check



后期将介绍grunt的每一个模块。

附录:

grunt.initConfig

配置各模块的参数,每项对应一个同名模块。

grunt.loadNpmTasks

加载所需的模块。

grunt.registerTask

定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default是默认任务,即直接输入grunt命令,后面不跟任何参数,这时所调用的模块为default对应的任务。

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: