开始之前，确保环境已经安装了 node 和 grunt 。
通过在命令行输入 grunt 查看是否正确安装了grunt 。
通过在命令行输入 node 查看是否正确安装了node 。
生成 package.json 文件
这个 package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：
使用 命令来生成 package.json
[plain] view plain copy
npm init
生成的package.json如下
[plain] view plain copy
{
"name": "Demo",
"version": "1.0.0",
"description": "一个例子",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
安装 Grunt
首先安装 grunt
[plain] view plain copy
npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下，是不是多了
[plain] view plain copy
"devDependencies": {
"grunt": "^0.4.5"
}
创建Grunt配置文件
创建一个Grunt的配置文件 Gruntfile.js，内容如下
[javascript] view plain copy
module.exports = function(grunt) {
grunt.initConfig({
});
};<pre name="code" class="javascript"> grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('test', ['concat','uglify','jshint','watch']);
安装concat插件
concat插件用来将多个文件合并成一个文件。安装该插件的命令如下：
[plain] view plain copy
npm install grunt-contrib-concat --save-dev
安装成功后，可以看到package.json里面多了grunt-contrib-concat
接下来在 Gruntfile.js对该插件进行配置
[javascript] view plain copy
module.exports = function(grunt) {
grunt.initConfig({
//读取package.json文件
pkg: grunt.file.readJSON('package.json'),
//concat用来合并js文件
concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {
// 将要被合并的文件
src: ['app/src/**/*.js'],
// 合并后的JS文件的存放位置
dest: 'app/dist/<%= pkg.name %>.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['concat']);
};
接下来在 app/src/目录下创建两个js文件， a.js 和 b.js 。
在命令行执行 grunt test 之后，会发生在 app/dist/文件夹下多个一个Demo.js文件，该文件合并了 a.js和b.js 。
[plain] view plain copy
grunt test
安装uglify插件
uglify 插件用来对文件进行压缩。安装该插件的命令如下
[plain] view plain copy
npm install grunt-contrib-uglify --save-dev
安装成功后，可以查看package.json里面是否多了grunt-contrib-uglify
接下来对 uglify进行配置。配置文件如下：
[javascript] view plain copy
module.exports = function(grunt) {
grunt.initConfig({
//读取package.json文件
pkg: grunt.file.readJSON('package.json'),
//concat用来合并js文件
concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {
// 将要被合并的文件
src: ['app/src/**/*.js'],
// 合并后的JS文件的存放位置
dest: 'app/dist/<%= pkg.name %>.js'
}
},
//uglify用来压缩js文件
uglify: {
options: {
// 此处定义的banner注释将插入到输出文件的顶部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
//uglify会自动压缩concat任务中生成的文件
'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('test', ['concat','uglify']);
};
在命令行执行 grunt test ，可以看到 app/dist文件下多了Demo.min.js，该文件对Demo.js进行了压缩。
安装jshint插件
jshint插件用来对js的代码规范进行检查。安装该插件的命令为
[plain] view plain copy
npm install grunt-contrib-jshint --save-dev
然后对jshint进行配置。配置文件如下（下面只贴部分代码，整体的配置文件在最后会给出）
[javascript] view plain copy
//jshint用来检查js代码规范
jshint: {
files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件
options: {
//这里是覆盖JSHint默认配置的选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
}
[javascript] view plain copy
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('test', ['jshint']);
此时，输入 grunt test ， jshint便会对文件进行检查，并在控制台输出检查的结果
安装watch插件
watch用来监听文件，当文件发生变化时会执行tasks中指定的任务。安装该插件的命令为
[plain] view plain copy
npm install grunt-contrib-watch --save-dev
然后对该插件进行配置
[javascript] view plain copy
//watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
watch: {
//监听的文件
files: ['<%= jshint.files %>','app/index.html'],
tasks: ['jshint']
},
[javascript] view plain copy
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('test', ['watch']);
在命令行输入 grunt test之后，会发现watch启动，一直在监听文件的变化，当监听的文件发生变化时，会执行jshint命令来进行检查
安装wiredep插件
wiredep插件用来自动将bower_components中的包加入到index.html中 。
安装该插件的命令为
[plain] view plain copy
npm install grunt-wiredep --save-dev
在配置文件中，对wiredep进行配置
[javascript] view plain copy
//watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
watch: {
//监听的文件
files: ['<%= jshint.files %>','app/index.html'],
tasks: ['jshint']
},
[javascript] view plain copy
grunt.loadNpmTasks('grunt-wiredep');
grunt.registerTask('test', ['wiredep']);
对于该命令的测试，在使用bower安装AngualrJS和Bootstrap时进行
使用bower安装angularjs和bootstrap
为了让wiredep插件能够自动将bower安装的插件注入到index.html中，我们先生成bower的配置文件，使用如下命令：
[plain] view plain copy
bower init
生成的文件如下：
[plain] view plain copy
{
"name": "Demo",
"description": "一个例子",
"main": "index.js",
"authors": [
"藏红 <canghong.ch@alibaba-inc.com>"
],
"license": "ISC",
"moduleType": [],
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
接着使用bower安装AngularJS
[plain] view plain copy
bower install angularjs --save grunt
安装成功后，在bower.json会看到读了 grunt 和 angularjs
[plain] view plain copy
"dependencies": {
"angular": "angularjs#~1.4.8",
"grunt": "~0.4.5"
}
然后在命令行运行 wiredep ，该插件会自动将angularjs加入到index.html中。运行前的index.html内容如下
[html] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to use Grunt Wirdep</title>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
indexasdf123123
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
运行后的index.html命令如下
[html] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to use Grunt Wirdep</title>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
indexasdf123123
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<!-- endbower -->
</body>
</html>
接下来按相同的方式安装 bootstrap命令如下
[plain] view plain copy
bower install bootstrap -save
在此运行 grunt test ，发现 index.html内容为
[html] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to use Grunt Wirdep</title>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
indexasdf123123
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
</body>
</html>
bootstrap.js导入了，但bootstrap.css并未导入。不用担心，这是由 bootstrap的bower.json文件错误导致的，打开自己的bower.json文件，添加如下内容
[plain] view plain copy
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
}
}
重新运行 grunt test，bootstrap.css被正确注入
[html] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to use Grunt Wirdep</title>
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
</head>
<body>
indexasdf123123
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
</body>
</html>
安装connect插件
connect插件可以让前端project开启connect服务，安装命令如下：
[plain] view plain copy
npm install grunt-contrib-connect --save-dev
在grunt配置文件中对connnect进行配置
[javascript] view plain copy
//服务器连接服务
connect: {
options: {
port: 9000,
hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
livereload: 35729 ,//声明给 watch 监听的端口
keepalive:true, //保持连接
},
server: {
options: {
open: true, //自动打开网页 https://
base: [
'' //主目录
]
}
}
}
[javascript] view plain copy
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['connect']);
通过grunt test 启动之后，会自动开启浏览器，打开app/index.html
完整的gruntfile.js
[javascript] view plain copy
module.exports = function(grunt) {
grunt.initConfig({
//读取package.json文件
pkg: grunt.file.readJSON('package.json'),
//concat用来合并js文件
concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {
// 将要被合并的文件
src: ['app/src/**/*.js'],
// 合并后的JS文件的存放位置
dest: 'app/dist/<%= pkg.name %>.js'
}
},
//uglify用来压缩js文件
uglify: {
options: {
// 此处定义的banner注释将插入到输出文件的顶部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
//uglify会自动压缩concat任务中生成的文件
'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
//jshint用来检查js代码规范
jshint: {
files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件
options: {
//这里是覆盖JSHint默认配置的选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
//watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
watch: {
//监听的文件
files: ['<%= jshint.files %>','app/index.html'],
tasks: ['jshint']
},
//wiredep自动将bower_components中的包加入到index.html中
wiredep: {
task: {
src: ['app/index.html']
}
},
//服务器连接服务
connect: {
options: {
port: 9000,
hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
livereload: 35729 //声明给 watch 监听的端口
},
server: {
options: {
open: true, //自动打开网页 https://
base: [
'app' //主目录
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['concat','connect','wiredep','uglify','jshint','watch']);
};
