下面以angular为开发框架，实战个前端开发项目。（windows环境为例）
创建项目根目录文件夹：public
在cmd里面，进入到public文件夹待命。
执行初始化配置命令：
npm init按照提示，使用默认配置即可。见下图：
如果不了解package.json，输入命令‘npm help json’查看文档。
如果要安装js库，输入命令‘npm install <pkg> --save’或者‘npm install <pkg> --save-dev’安装，会自动在package.json里添加依赖。其中的'--save-dev'为开发阶段相关的依赖。
执行安装grunt命令：
npm install grunt --save-dev安装成功后，观察public文件夹，里面多了个node_modules文件夹，这里放的是通过npm安装的js库。
观察package.json文件内容，发现已经添加了开发阶段的依赖库：
"devDependencies": {
"grunt": "^0.4.5"
}执行初始化配置命令：采用全局方式安装，以便在其他项目中使用。（注意：需已经配置好git的环境）
npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile如果已经安装好grunt-init，则直接执行初始化配置命令：
grunt-init gruntfile按照提示，使用默认配置即可。见下图：
观察package.json文件内容，发现已经变成了这样：
{
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-uglify": "~0.5.0"
}
}其中的jshint是代码检查，watch检测文件变化，qunit单元测试，concat合并文件，uglify压缩文件。
因为已经使用karma测试框架，所以删除qunit的js库。
同样的，在Gruntfile.js文件里删除qunit的task任务。
了解更多grunt，请自行参考grunt文档。
执行命令去安装jshint、watch、concat、uglify的js库：
npm install此命令会自动根据package.json里的依赖，在当前文件夹里安装所需的js库。
执行初始化配置命令：
bower init请根据向导，按照个人需要输入，大多数可使用默认选项，即可完成配置文件，如下图：
打开并编辑Gruntfile.js，把
pkg: grunt.file.readJSON('package.json'),
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',修改为：
pkg: grunt.file.readJSON('bower.json'),
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.authors[0] %>;' +
' <%= pkg.license %> License */\n\n',下面使用bower来安装jquery、angular、bootstrap，执行命令：
bower install jquery --save
bower install angular --save
bower install bootstrap --save其中的‘--save’是自动在bower.json里添加依赖的库。
观察public文件夹，里面多了个bower_components文件夹，这里放的是通过bower安装的js库
观察bower.json文件内容，发现已经添加依赖库了：
"dependencies": {
"jquery": "~2.1.4",
"angular": "~1.4.7",
"bootstrap": "~3.3.5"
}还可以到这里搜索你需要的js库并安装。
修改grunt配置文件Gruntfile.js，以符合规划的项目目录结构，修改之后的文件内容：
/*global module:false*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('bower.json'),
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.authors[0] %>;' +
' <%= pkg.license %> License */\n\n',
// Task configuration.
concat: {
options: {
banner: '<%= banner %>',
stripBanners: true
},
dist: {
src: ['app/js/**/*.js'],
dest: 'app/dist/all.js'
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
dist: {
src: '<%= concat.dist.dest %>',
dest: 'app/dist/all.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
node: true,
predef: ["angular"]
},
gruntfile: {
src: 'Gruntfile.js'
},
lib_test: {
src: ['app/dist/all.js', 'app/js/**/*.js']
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['concat', 'jshint', 'uglify']);
};好了，执行下grunt默认的任务，即concat、jshint、uglify任务，试试看，输入命令：
grunt如果看到输出的内容包含下面文字，则恭喜你成功了。
Done, without errors.
到目前为止，开发所需的js库终于安装配置完毕了。但思考一下，html页面里需要引用我们自己的js文件以及依赖包里的js、css文件，那将需要编写挺多的代码了，另外还需要将bower_components文件夹与项目一起部署，着实不爽。
由于我们已经通过grunt把自己写的js文件合并成一个all.js文件了，所以只需要在html页面引入all.js文件就好了；
为了不将文件夹bower_components与项目一起部署，我们需要复制用到的js、css文件到dist/lib文件夹下，供html页面使用。这一步骤，我们可以通过grunt-bower-task来自动完成。
下面我们来安装grunt的这个插件，执行命令：
npm install grunt-bower-task --save-dev多一嘴，npm安装的是开发测试所需的js库，bower安装的是项目依赖的js库。
安装完毕后，把grunt-bower-task插件植入。
打开并编辑grunt配置文件Gruntfile.js，加上：
grunt.loadNpmTasks('grunt-bower-task');bower: {
install: {
options: {
targetDir: 'app/dist/lib',
layout: 'byComponent',
install: true,
verbose: false,
cleanTargetDir: false,
cleanBowerDir: false,
bowerOptions: {}
}
}
}grunt.registerTask('default', ['concat', 'jshint', 'uglify', 'bower']);如果不清楚如何安装grunt插件，参考grunt-bower-task的文档。
好了，再执行下grunt默认的任务，即concat、jshint、uglify、bower任务，试试看，输入命令：
grunt执行成功后，发现在dist/lib文件夹下，我们的jquery、angular、bootstrap都复制过来了。但，等等，我们需要的是bootstrap的css文件，怎么把js文件复制过来了。
打开bower.json并追加下面文字：
"exportsOverride": {
"bootstrap": {
"": ["dist/css/bootstrap.css", "dist/css/bootstrap.css.map"]
}
}再次执行grunt命令，并查看dist/lib/bootstrap文件夹。 这下成功了。可以开始编码了。
项目源码见：
本章项目源码：/commit/b0aa4ba4d4fced6d73b6d88ce2fa9a86b975a788
项目中用到了angular-ui-router，使用下面命令安装：
bower install angular-ui-router --savecopyright = {
"作者": "墨衣夜行",
"本文链接": ""
}
