摘要：好棒，應該可以滿足絕大部分公司的{{BANNED}}需求了額。。可以在回調函數(shù)中調用其方法。。等下會大幅度減少滴。。。。百度搜索到官網點擊下載對應著自己電腦的版本。。可最后的請求是這樣的由此可見，。

序言

-# 公司大了，業(yè)務多了，前端代碼量也逐漸增大，我們漸漸的依賴js實現(xiàn)的交互越來越多，長期以來會導致我們的代碼維護越來越困難，所以依賴的插件也越來越多。。
比如這樣頁面中有大量的js外鏈引入。。

這么多的js 占用這么多的請求。。雖然放在頁面底部不影響頁面的正常顯示，但是過多的請求會給服務器帶來不小的壓力，同樣后期攻城師維護也不知道到底哪個js才是需要修改的那個了。。。。

那么下面引入正文 、、、、

如此多的js請求 。。。以及完全不相干的代碼、插件 我們所希望的是能有個東西將這些所有的js整理到1個js中 ，然后把一些較大的插件、較多代碼的js再分別做正常的引入。而這些文件的引入不在頁面里體現(xiàn)，以一個像配置文件的方式配置好引入這個配置文件到瀏覽器中執(zhí)行，以減少服務器的請求次數(shù)，減少服務器壓力。
好吧，目前我所了解到的能夠實現(xiàn)我們的需求的工具有2個分別是：
1、Requirejs
2、Seajs

額。。。那么下面我們來講一下這個requirejs的基本使用。。。（至于為什么不說sea。。。聽說sea比require要難 ，所以。。出于對公司的項目能夠更加快捷的開發(fā)，我只好舍己為公司了。。。好吧。，我承認其實是我怕自己學不會。。。。）
咳咳。。。

接下來我們開始一起來學習requirejs。。。。。
首先打開百度！ 搜索requirejs官網 。。。好吧我告訴你們
requirejs官網是：http://requirejs.org/
打開之后是這樣子的：

左側是導航 介紹requirejs 應該怎么調用等等。。。先看右邊 介紹的是require可以兼容的瀏覽器有 。。。。等等。。。
(還可以兼容到ie6 。。好棒，應該可以滿足絕大部分公司的{{BANNED}}需求了)

額。。如果大家打不開官網或者覺得官網網速慢，可以下載我們公司的服務器地址下的require。。
地址是：http://static.js.xywy.com/common/js/require.min.js

到15年8月21日我這使用的2.1.11版本

接下來我們需要做的是將require引入我們的頁面中。。

如此這般。。。我們來分析一下正常引入了個js文件 沒錯 那么問題來了。。
標簽中 data-main="config" 是？？？？我們先把這個放在瀏覽器里執(zhí)行一下 看看這段代碼都做了什么。，。

到此 。。我們可以看到 config 原來是個js 那么 data-main="config" 引入了一個文件
是的 沒錯 這就是require 幫我們做的 。。config 我打算把這個js叫做我們這個網頁的配置文件用它來控制其他文件的引用。。。而且在require的項目中，所有需要引入的文件都不要寫.js的后綴名哦。。因為requirejs 已經幫我們自動添加了.js后綴名 ，我們再自己添加會報錯(導致找不到文件)。

require配置：

require.config({
    path:{
        "jquery":"http://static.js.xywy.com/common/js/jqueryMin",
        "test":"./test",
        "banner":"/banner"
    }
});

require.config 就是配置require需要引進的文件
path 參數(shù)為對象 代表需要引進來的js 可以是相對路徑，也可以是絕對路徑

require執(zhí)行：

require(["jquery","test","banner"],function(){
    console.log($("h1").css("color","#f00"));
});

執(zhí)行requirejs的require方法 他接受2個參數(shù)
第一個參數(shù)為數(shù)組 數(shù)組里的每一個值分別對應著上面require配置下path參數(shù)對應的鍵值
第二個參數(shù)為引入所需要的js的回調函數(shù)。

如果要引入的是一個框架或者是自己封裝的功能組件等。。可以在回調函數(shù)中調用其方法！。。
好吧 require 基本的使用就告一段落了。。。。。才剛剛開始！

總結

到目前為止 我們已經實現(xiàn)了一半我們的需求。。現(xiàn)在頁面中所有請求數(shù)量沒有發(fā)生改變(其實還增加了2個請求，一個配置文件，一個require。。不要怕。。等下會大幅度減少滴。。)。。但是我們已經可以做到將所有的js統(tǒng)一由一個配置文件(config.js)控制頁面中所有js模塊的引入！

下面我們解決最大的一個問題，就是將js合并減少服務器請求的問題 。。。
我這邊是用的grunt來一步到位，完成壓縮與合并！ (通過gulp也可以哦)

好吧 我們先安裝grunt的運行環(huán)境nodejs ，大概敘述一下nodejs的安裝過程吧。。百度搜索nodejs到官網點擊download下載對應著自己電腦的版本。。然后點擊安裝包直接一路next安裝完成即可。。(友情提示：最好不要更改nodejs的安裝目錄，如更改安裝目錄據(jù)說需要手動設置環(huán)境變量了) ，然后打開cmd命令行程序 輸入node -v 測試是否安裝成功 出現(xiàn)以下畫面輸出nodejs的版本號證明安裝成功：

好的，接下來我們來安裝grunt，首先在全局環(huán)境安裝grunt （在任何目錄下都可以）執(zhí)行以下命令：

  npm install -g  grunt   -cli 
  
  

接下來進入到項目目錄下載grunt 以及下載grunt所需要用的壓縮、合并、等等插件，npm install xxxxxx即可
具體插件看自己需求吧，下面我把我自己的grunt的pakeage.json文件貢獻出來大家僅供參考：

{
  "name": "szy",
  "file": "file",
  "version": "0.0.1",
  "description": "szy",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",    //grunt主程序
    "grunt-contrib-uglify": "~0.2.1",   //為壓縮js插件
    "grunt-contrib-requirejs": "~0.4.1",  //requirejs合并插件
  },
  "dependencies": {
    "express": "3.x",
    "grunt-css":  ">0.0.0",
    "grunt-contrib-cssmin":">0.0.0"    //壓縮css插件
  }
}

如果使用鄙人的pakeage.json的話 直接將此文件拷貝到你的項目目錄然后在命令行執(zhí)行 npm install 即可
出現(xiàn)以下畫面證明下載成功可以使用咯！

下載完成后我的項目目錄是這樣的：

node_modules是剛剛下載的一些插件。
接下來們來創(chuàng)建grunt要執(zhí)行的 Gruntfile.js文件

module.exports = function (grunt) {
    // 項目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        requirejs:{
            compile:{
                options:{
                    name:"config",    //主文件名字
                    optimize:"uglify",   //指定壓縮工具類型  使用uglify工具壓縮
                    mainConfigFile:"./js/config.js",    //require 的主文件
                    out:"./src/all.js"            //壓縮后的文件
                    //其他無需指定  本插件會自動尋找require引進的所有文件
                }
            }
        }
    });
    // 加載提供"uglify"任務的插件
    grunt.loadNpmTasks("grunt-contrib-requirejs");

    // 默認任務
    grunt.registerTask("compile", ["requirejs"]);

}

以上是我根據(jù)之前的項目目錄所做的配置，已經親測過，無問題，合并之后的文件會生成到我所設置的src文件夾中。。叫all.js 如果對應的src目錄不存在 grunt會親自創(chuàng)建該目錄，所以小伙伴們不用擔心哦。。另外提醒大家一下。。 如上面的例子，我引入了jquery插件用的http方式引入的。可最后的請求是這樣的：

由此可見 ，。合并后的請求 jquery 并沒有合并到一起！ 請大家注意哦！ 另外大家有什么問題，歡迎評論。。第一次發(fā)這種文章。。有說錯的地方，歡迎指正！。。大家一起交流！
關于grunt的基本使用方法和gulp來實現(xiàn)合并壓縮requirejs的方法。。敬請關注我的下一篇文章。。。嘻嘻。。。