前端使用bower+grunt-wiredep自动引入js和css

变化中的前端开发

前端开发在以前的时候是比较容易被新手理解和接受的，需要哪个 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