> 序言
- -# 公司大了，業務多了，前端代碼量也逐漸增大，我們漸漸的依賴js實現的交互越來越多，長期以來會導致我們的代碼維護越來越困難，所以依賴的插件也越來越多。。
比如這樣頁面中有大量的js外鏈引入。。
這么多的js 占用這么多的請求。。雖然放在頁面底部不影響頁面的正常顯示，但是過多的請求會給服務器帶來不小的壓力，同樣后期攻城師維護也不知道到底哪個js才是需要修改的那個了。。。。
那么下面引入正文 、、、、
如此多的js請求 。。。以及完全不相干的代碼、插件 我們所希望的是能有個東西將這些所有的js整理到1個js中 ，然后把一些較大的插件、較多代碼的js再分別做正常的引入。而這些文件的引入不在頁面里體現，以一個像配置文件的方式配置好引入這個配置文件到瀏覽器中執行，以減少服務器的請求次數，減少服務器壓力。
好吧，目前我所了解到的能夠實現我們的需求的工具有2個分別是：
1、Requirejs
2、Seajs
額。。。那么下面我們來講一下這個requirejs的基本使用。。。（至於為什么不說sea。。。聽說sea比require要難 ，所以。。出於對公司的項目能夠更加快捷的開發，我只好舍己為公司了。。。好吧。，我承認其實是我怕自己學不會。。。。）
咳咳。。。
接下來我們開始一起來學習requirejs。。。。。
首先打開百度！ 搜索requirejs官網 。。。好吧我告訴你們
requirejs官網是：http://requirejs.org/
打開之后是這樣子的：
左側是導航 介紹requirejs 應該怎么調用等等。。。先看右邊 介紹的是require可以兼容的瀏覽器有 。。。。等等。。。
(還可以兼容到ie6 。。好棒，應該可以滿足絕大部分公司的變態需求了)
官方下載地址是：http://requirejs.org/docs/release/2.1.20/minified/require.js
額。。如果大家打不開官網或者覺得官網網速慢，可以下載我們公司的服務器地址下的require。。
地址是：http://static.js.xywy.com/common/js/require.min.js
到15年8月21日我這使用的2.1.11版本
接下來我們需要做的是將require引入我們的頁面中。。
<script data-main="config" type="text/javascript" src="http://static.js.xywy.com/common/js/require.min.js"></script>
如此這般。。。我們來分析一下正常引入了個js文件 沒錯 那么問題來了。。
標簽中 data-main="config" 是？？？？我們先把這個放在瀏覽器里執行一下 看看這段代碼都做了什么。，。
到此 。。我們可以看到 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 參數為對象 代表需要引進來的js 可以是相對路徑，也可以是絕對路徑
require執行：
require(['jquery','test','banner'],function(){ console.log($('h1').css('color','#f00')); });
執行requirejs的require方法 他接受2個參數
第一個參數為數組 數組里的每一個值分別對應着上面require配置下path參數對應的鍵值
第二個參數為引入所需要的js的回調函數。
如果要引入的是一個框架或者是自己封裝的功能組件等。。可以在回調函數中調用其方法！。。
好吧 require 基本的使用就告一段落了。。。。。才剛剛開始！
> 總結
到目前為止 我們已經實現了一半我們的需求。。現在頁面中所有請求數量沒有發生改變(其實還增加了2個請求，一個配置文件，一個require。。不要怕。。等下會大幅度減少滴。。)。。但是我們已經可以做到將所有的js統一由一個配置文件(config.js)控制頁面中所有js模塊的引入！
下面我們解決最大的一個問題，就是將js合並減少服務器請求的問題 。。。
我這邊是用的grunt來一步到位，完成壓縮與合並！ (通過gulp也可以哦)
好吧 我們先安裝grunt的運行環境nodejs ，大概敘述一下nodejs的安裝過程吧。。百度搜索nodejs到官網點擊download下載對應着自己電腦的版本。。然后點擊安裝包直接一路next安裝完成即可。。(友情提示：最好不要更改nodejs的安裝目錄，如更改安裝目錄據說需要手動設置環境變量了) ，然后打開cmd命令行程序 輸入node -v 測試是否安裝成功 出現以下畫面輸出nodejs的版本號證明安裝成功：
好的，接下來我們來安裝grunt，首先在全局環境安裝grunt （在任何目錄下都可以）執行以下命令：
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的話 直接將此文件拷貝到你的項目目錄然后在命令行執行 npm install 即可
出現以下畫面證明下載成功可以使用咯！
下載完成后我的項目目錄是這樣的：
node_modules是剛剛下載的一些插件。
接下來們來創建grunt要執行的 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']); }
以上是我根據之前的項目目錄所做的配置，已經親測過，無問題，合並之后的文件會生成到我所設置的src文件夾中。。叫all.js 如果對應的src目錄不存在 grunt會親自創建該目錄，所以小伙伴們不用擔心哦。。另外提醒大家一下。。 如上面的例子，我引入了jquery插件用的http方式引入的。可最后的請求是這樣的：
由此可見 ，。合並后的請求 jquery 並沒有合並到一起！ 請大家注意哦！
另外大家有什么問題，歡迎評論。。第一次發這種文章。。有說錯的地方，歡迎指正！。。大家一起交流！
關於grunt的基本使用方法和gulp來實現合並壓縮requirejs的方法。。敬請關注我的下一篇文章。。。嘻嘻。。。
歡迎大家關注我的新浪微博：@前端的傻小子
本文作者：前端的傻小子
原文鏈接：http://segmentfault.com/a/1190000003409854
可自由轉載、引用，但需署名作者且注明文章出處。