grunt\angularjs

开始之前，确保环境已经安装了 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({

});

}; 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

How to use Grunt Wirdep

indexasdf123123

运行后的index.html命令如下

[html] view plain copy

How to use Grunt Wirdep

indexasdf123123

接下来按相同的方式安装 bootstrap命令如下

[plain] view plain copy

bower install bootstrap -save

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

[html] view plain copy

How to use Grunt Wirdep

indexasdf123123

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

How to use Grunt Wirdep

indexasdf123123

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

};

http://blog.csdn.net/ch717828/article/details/50339087