摘要：好棒，應(yīng)該可以滿足絕大部分公司的{{BANNED}}需求了額。?？梢栽诨卣{(diào)函數(shù)中調(diào)用其方法。。等下會(huì)大幅度減少滴。。。。百度搜索到官網(wǎng)點(diǎn)擊下載對(duì)應(yīng)著自己電腦的版本。?？勺詈蟮恼?qǐng)求是這樣的由此可見(jiàn)，。

序言

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

這么多的js 占用這么多的請(qǐng)求。。雖然放在頁(yè)面底部不影響頁(yè)面的正常顯示，但是過(guò)多的請(qǐng)求會(huì)給服務(wù)器帶來(lái)不小的壓力，同樣后期攻城師維護(hù)也不知道到底哪個(gè)js才是需要修改的那個(gè)了。。。。

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

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

額。。。那么下面我們來(lái)講一下這個(gè)requirejs的基本使用。。。（至于為什么不說(shuō)sea。。。聽(tīng)說(shuō)sea比require要難 ，所以。。出于對(duì)公司的項(xiàng)目能夠更加快捷的開(kāi)發(fā)，我只好舍己為公司了。。。好吧。，我承認(rèn)其實(shí)是我怕自己學(xué)不會(huì)。。。。）
咳咳。。。

接下來(lái)我們開(kāi)始一起來(lái)學(xué)習(xí)requirejs。。。。。
首先打開(kāi)百度！ 搜索requirejs官網(wǎng) 。。。好吧我告訴你們
requirejs官網(wǎng)是：http://requirejs.org/
打開(kāi)之后是這樣子的：

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

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

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

接下來(lái)我們需要做的是將require引入我們的頁(yè)面中。。

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

到此 。。我們可以看到 config 原來(lái)是個(gè)js 那么 data-main="config" 引入了一個(gè)文件
是的 沒(méi)錯(cuò) 這就是require 幫我們做的 。。config 我打算把這個(gè)js叫做我們這個(gè)網(wǎng)頁(yè)的配置文件用它來(lái)控制其他文件的引用。。。而且在require的項(xiàng)目中，所有需要引入的文件都不要寫(xiě).js的后綴名哦。。因?yàn)閞equirejs 已經(jīng)幫我們自動(dòng)添加了.js后綴名 ，我們?cè)僮约禾砑訒?huì)報(bào)錯(cuò)(導(dǎo)致找不到文件)。

require配置：

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

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

require執(zhí)行：

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

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

如果要引入的是一個(gè)框架或者是自己封裝的功能組件等。?？梢栽诨卣{(diào)函數(shù)中調(diào)用其方法！。。
好吧 require 基本的使用就告一段落了。。。。。才剛剛開(kāi)始！

總結(jié)

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

下面我們解決最大的一個(gè)問(wèn)題，就是將js合并減少服務(wù)器請(qǐng)求的問(wèn)題 。。。
我這邊是用的grunt來(lái)一步到位，完成壓縮與合并！ (通過(guò)gulp也可以哦)

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

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

  npm install -g  grunt   -cli 
  
  

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

{
  "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的話 直接將此文件拷貝到你的項(xiàng)目目錄然后在命令行執(zhí)行 npm install 即可
出現(xiàn)以下畫(huà)面證明下載成功可以使用咯！

下載完成后我的項(xiàng)目目錄是這樣的：

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

module.exports = function (grunt) {
    // 項(xiàng)目配置
    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"            //壓縮后的文件
                    //其他無(wú)需指定  本插件會(huì)自動(dòng)尋找require引進(jìn)的所有文件
                }
            }
        }
    });
    // 加載提供"uglify"任務(wù)的插件
    grunt.loadNpmTasks("grunt-contrib-requirejs");

    // 默認(rèn)任務(wù)
    grunt.registerTask("compile", ["requirejs"]);

}

以上是我根據(jù)之前的項(xiàng)目目錄所做的配置，已經(jīng)親測(cè)過(guò)，無(wú)問(wèn)題，合并之后的文件會(huì)生成到我所設(shè)置的src文件夾中。。叫all.js 如果對(duì)應(yīng)的src目錄不存在 grunt會(huì)親自創(chuàng)建該目錄，所以小伙伴們不用擔(dān)心哦。。另外提醒大家一下。。 如上面的例子，我引入了jquery插件用的http方式引入的?？勺詈蟮恼?qǐng)求是這樣的：

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