序言javascript
-# 公司大了,业务多了,前端代码量也逐渐增大,咱们渐渐的依赖js实现的交互愈来愈多,长期以来会致使咱们的代码维护愈来愈困难,因此依赖的插件也愈来愈多。。
好比这样页面中有大量的js外链引入。。css
这么多的js 占用这么多的请求。。虽然放在页面底部不影响页面的正常显示,可是过多的请求会给服务器带来不小的压力,一样后期攻城师维护也不知道到底哪一个js才是须要修改的那个了。。。。前端
那么下面引入正文 、、、、java
如此多的js请求 。。。以及彻底不相干的代码、插件 咱们所但愿的是能有个东西将这些全部的js整理到1个js中 ,而后把一些较大的插件、较多代码的js再分别作正常的引入。而这些文件的引入不在页面里体现,以一个像配置文件的方式配置好引入这个配置文件到浏览器中执行,以减小服务器的请求次数,减小服务器压力。
好吧,目前我所了解到的可以实现咱们的需求的工具备2个分别是:
一、Requirejs
二、Seajsnode
额。。。那么下面咱们来说一下这个requirejs的基本使用。。。(至于为何不说sea。。。据说sea比require要难 ,因此。。出于对公司的项目可以更加快捷的开发,我只好舍己为公司了。。。好吧。,我认可实际上是我怕本身学不会。。。。)
咳咳。。。jquery
接下来咱们开始一块儿来学习requirejs。。。。。
首先打开百度! 搜索requirejs官网 。。。好吧我告诉大家
requirejs官网是:http://requirejs.org/
打开以后是这样子的:express
左侧是导航 介绍requirejs 应该怎么调用等等。。。先看右边 介绍的是require能够兼容的浏览器有 。。。。等等。。。
(还能够兼容到ie6 。。好棒,应该能够知足绝大部分公司的变态需求了)npm
额。。若是你们打不开官网或者以为官网网速慢,能够下载咱们公司的服务器地址下的require。。
地址是:http://static.js.xywy.com/common/js/require.min.jsjson
到15年8月21日我这使用的2.1.11版本gulp
接下来咱们须要作的是将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的方法。。敬请关注个人下一篇文章。。。嘻嘻。。。