序文

• -# 公司大了，营业多了，前端代码量也逐步增大，我们逐渐的依靠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 。。好棒，应当能够满足绝大部分公司的变态需求了)

额。。假如人人打不开官网或许以为官网网速慢，能够下载我们公司的服务器地点下的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的要领。。敬请关注我的下一篇文章。。。嘻嘻。。。