1、安装grunt
在CMD 窗口中,切换到node安装盘符,会自动切换到nodejs安装目录。
输入 npm install -g grunt-cli 回车
安装成功后会显示安装路径以及版本号。
2、使用grunt构建web程序
一、新建项目projA
projA新建两个文件夹,分别是dist和src
。
源码放在src下,src下再建css和js文件夹,js目录下有两个js文件,selector.js和ajax.js。
编辑后的代码放在dest,这个grunt会自动生成。
二、新建package.json
package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。它应该和源码一样被提交到svn或git。
package.json内容需要符合JSON语法规范,如下
{
<span style="color:#000099;background-color: rgb(204, 204, 204);"> "name": "projA",
"version":"0.1.0",
"dependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.5.1",//压缩
"grunt-contrib-nodeunit": "^0.4.1",
"grunt-contrib-jshint": "^0.10.0",//语法检查
"grunt-contrib-concat":"~0.1.1"//合并文件
}</span>
}
建好了之后打开命令行工具进入到项目根目录,敲如下命令:
npm install
再查看根目录,发现多了node_modules目录,包含了五个子目录
三、新建文件Gruntfile.js
Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。
Gruntfile.js由以下内容组成
<span style="color:#000099;">module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
domop : {
src: ['src/js/ajax.js', 'src/js/selector.js'],
//合并src/js下的文件(ajax.js/selector.js)为domop.js
dest: 'dist/domop.js'
}
},
uglify : {
options : {
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build : {
src : 'dist/domop.js',
dest : 'dist/domop.min.js'
}//压缩domop.js为domop.min.js,并且这两个目录都放在dist目录下
}
});
// 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify']);
};</span>
四、执行grunt任务
打开命令行,进入到项目根目录,敲grunt
在项目中即可看到合并与压缩的功能已实现了。