Grunt搭建AngularJS项目

开始之前，确保环境已经安装了 node 和 grunt 。

通过在命令行输入 grunt 查看是否正确安装了grunt 。

通过在命令行输入 node 查看是否正确安装了node 。

生成 package.json 文件

这个
package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：

使用 命令来生成
package.json

npm init

生成的package.json如下

{
"name": "Demo",
"version": "1.0.0",
"description": "一个例子",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

安装 Grunt

首先安装 grunt

npm install grunt --save-dev

表示通过
npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到
package.json 文件中。不信你打开
package.json 文件看下，是不是多了

"devDependencies": {
"grunt": "^0.4.5"
}

创建Grunt配置文件

创建一个Grunt的配置文件 Gruntfile.js，内容如下

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插件用来将多个文件合并成一个文件。安装该插件的命令如下：

npm install grunt-contrib-concat --save-dev

安装成功后，可以看到package.json里面多了grunt-contrib-concat
接下来在 Gruntfile.js对该插件进行配置

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 。

grunt test

安装uglify插件

uglify 插件用来对文件进行压缩。安装该插件的命令如下

npm install grunt-contrib-uglify --save-dev

安装成功后，可以查看package.json里面是否多了grunt-contrib-uglify
接下来对 uglify进行配置。配置文件如下：

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的代码规范进行检查。安装该插件的命令为

npm install grunt-contrib-jshint --save-dev

然后对jshint进行配置。配置文件如下（下面只贴部分代码，整体的配置文件在最后会给出）

//jshint用来检查js代码规范
jshint: {
files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件
options: {
//这里是覆盖JSHint默认配置的选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
}

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('test', ['jshint']);

此时，输入
grunt test ， jshint便会对文件进行检查，并在控制台输出检查的结果

安装watch插件

watch用来监听文件，当文件发生变化时会执行tasks中指定的任务。安装该插件的命令为

npm install grunt-contrib-watch --save-dev

然后对该插件进行配置

//watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
watch: {
//监听的文件
files: ['<%= jshint.files %>','app/index.html'],
tasks: ['jshint']
},

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('test', ['watch']);

在命令行输入 grunt test之后，会发现watch启动，一直在监听文件的变化，当监听的文件发生变化时，会执行jshint命令来进行检查

安装wiredep插件

wiredep插件用来自动将bower_components中的包加入到index.html中 。
安装该插件的命令为

npm install grunt-wiredep --save-dev

在配置文件中，对wiredep进行配置

//watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
watch: {
//监听的文件
files: ['<%= jshint.files %>','app/index.html'],
tasks: ['jshint']
},

grunt.loadNpmTasks('grunt-wiredep');
grunt.registerTask('test', ['wiredep']);

对于该命令的测试，在使用bower安装AngualrJS和Bootstrap时进行

使用bower安装angularjs和bootstrap

为了让wiredep插件能够自动将bower安装的插件注入到index.html中，我们先生成bower的配置文件，使用如下命令：

bower  init

生成的文件如下：

{
"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

bower install angularjs --save grunt

安装成功后，在bower.json会看到读了 grunt 和 angularjs

"dependencies": {
"angular": "angularjs#~1.4.8",
"grunt": "~0.4.5"
}

然后在命令行运行 wiredep ，该插件会自动将angularjs加入到index.html中。运行前的index.html内容如下

<!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命令如下

<!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命令如下

bower install bootstrap -save

在此运行 grunt test ，发现 index.html内容为

<!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文件，添加如下内容

"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
}
}

重新运行 grunt test，bootstrap.css被正确注入

<!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服务，安装命令如下：

npm install grunt-contrib-connect --save-dev

在grunt配置文件中对connnect进行配置

//服务器连接服务
connect: {
options: {
port: 9000,
hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
livereload: 35729  ,//声明给 watch 监听的端口
keepalive:true, //保持连接
},
server: {
options: {
open: true, //自动打开网页 http:// base: [
''  //主目录
]
}
}

}

grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['connect']);

通过grunt test 启动之后，会自动开启浏览器，打开app/index.html

完整的gruntfile.js

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, //自动打开网页 http:// 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']);

};