变化中的前端开发
前端开发在以前的时候是比较容易被新手理解和接受的，需要哪个 js 文件哪个 css
文件，去下载相应的文件放在项目里，直接相对路径引入即可，当然还可以是使用
CDN 加载。
现在前端开发几乎都是自动化，也不再需要自己去下载各式各样的包，因为有些包管理工具已经很成熟，类似 npm 和 bower。bower 需要使用 npm 来全局安装，使用 bower 会把你想要的包通过命令下载到项目中。
bower install jquery --save
就会把 jQuery 默认下载到项目中的 bower_components 目录中，而且也会在bower.json 文件中写入依赖，这样对于包管理做的还是比较好的。但是问题在于怎么引入相应的 js 文件到 html 文件里呢？肯定是需要路径去引入的。
以前的前端项目中会有 js 和 css 目录，分别存放各式各样的 js 文件和 css 文件，引入时以 js 或者 css 为相对路径就可以。现在又多了一级 bower_components 原理也不会变，不一样的是所有要引入的 js 文件不在一个统一目录中，而是在各自的包名下面。
比如：
bower_components/jquery/dist/jquery.js
bower_components/bootstrap/dist/css/bootstrap.css
这样就造成一些麻烦，路径太长还要自己手动引入吗？
使用 grunt-wiredep 工具自动引入依赖
需要先安装 grunt 和 grunt-wiredep
npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt-wiredep --save-dev
在项目下新建 Gruntfile.js 文件，假设要引入模块的文件是 index.html
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.initConfig({
wiredep: {
target: {
src: 'index.html'
}
}
});
}
这样我们是创建了一个 grunt 任务 wiredep，我们只需要在终端键入命令 grunt wiredep 就应该能看到 index.html 里自动引入文件的，不过还需要做一些事情。
- 首先安装jquery的时候，一定要加 --save 参数，这样 bower.json 中才会写入 jquery 的依赖，而 grunt-wiredip 需要参考 bower.json 中的依赖进行工作。
- 在 index.html 中需要引用文件的地方做记号，分别表示要插入 js 或者 css 的位置
<!-- bower:js -->
<!-- endbower -->
<!-- bower:css -->
<!-- endbower -->
- 这个时候其实引入 js 没问题了，但是 css 还是无法正常引入，又需要在 bower.json 中加入代码，以bootstrap举例，明确文件的路径
"dependencies": {
...
},
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css"
]
}
}
最后我们只需要键入 grunt wiredep 就可以看到该引入文件的地方，grunt-wiredep 已经帮我们自动引入了。s
