變化中的前端開發

前端開發在以前的時候是比較容易被新手理解和接受的，需要哪個 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