1 配置node环境

2 配置built.js文档

3 执行命令node r.js -o built.js

文件目录：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/main.css">

    <script data-main="js/main" src="./require.js"></script>

    <style type="text/css">

        /**

         * [reset description]

         * @type {[reset]}

         * @author:854400961@qq.com;

         */

        body{margin:0 auto;padding:0;color:#000;font-size:12px;font-family:'微软雅黑';}

        body > div{margin:0 auto;}

        div,form,ul,ol,li,span,p,dl,dt,dd,img,legend,fieldset{margin:0;padding:0;border:0;}

        h1,h2,h3,h4,h5,h6,b,i,em{margin:0;padding:0;font-size:12px;font-weight:normal; font-style:normal;}

        ul,ol,li,dl,dt,dd{list-style:none}

        table,td,input,textarea{font-size:12px;}

        img{vertical-align: bottom;}

        span{display: block;}

        a {color:#333;text-decoration:none;}

        a:hover {color:red;text-decoration:underline;}

        .hidden{overflow: hidden; text-indent:-999em; width:0; height:0}

        .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}

        .clearfix{*zoom:1;}

        *{outline:none}

    </style>

</head>

<body>

    <style type="text/css">

    .col-nav-bar ul li{list-style-type: none;float: left;width: 100px;height: 30px;text-align: center;}

    .col-context>div{background-color: red;}

    .col-context-hidden{display: none;}

    .col-context-active{display: block;}

    .col-context-active-other{}

    </style>

    <span class="col-nav-bar">

        <ul class="clearfix">

            <li>1</li>

            <li class="col-context-hover">2</li>

            <li class="col-context-hover">3</li>

        </ul>

    </span>

    <span class="col-context">

        <div class="col-container-1">A</div>

        <div class="col-container-2 col-context-hidden">B</div>

        <div class="col-container-3 col-context-hidden">C</div>

    </span>

    <ul class="video">

        <li>text <span class="play">Play</span></li>

        <li>text <span class="play">Play</span></li>

        <li>text <span class="play">Play</span></li>

        <li>text <span class="play">Play</span></li>

        <li>text <span class="play">Play</span></li>

        <li>text <span class="play">Play</span></li>

    </ul>

    <button class="btn">Click</button>

</body>

</html>
require.config({

    paths:{

        "jquery":"../lib/jquery",

        "domReady":"../lib/domReady",

        "colTab":"colTab",

        "block":"block"

    }

})

require(['colTab','block','domReady'],function(colTab,colBlock,domReady){

    colTab.init();

    colBlock.init();

    colBlock.blockUI

    alert(1)

    domReady(function(){

        document.querySelector("body").innerHTML="<img src='http://image.beekka.com/blog/201211/bg2012110702.jpg'>"

    })

})
define(['jquery'],function($){

    var colBlock=function(){

        var overLay=$("<span>",{

            class:"overlayHook",

            html:"<span class='overlay-hook' style='position:fixed;top:50%;left:50%;width:200px;height:200px;z-index:99999;background:white;'></span>",

            css:{

                position:"absolute",

                width:"100%",

                height:"100%",

                opacity:.5,

                backgroundColor:"black",

                top:"0px"

            }

        });

        var overLayLoad=function(){

            // console.log($(this).index());

            $("body").append(overLay);

            $(".overlayHook").bind("click",function(){

                $(this).remove();

            })

            $(".overlayHook .overlay-hook").click(function(e){

                e.stopPropagation();

                return;

            });

        }

        $(document).ready(function(){

            var videoId=$(".video li").find("play").end();

            videoId.each(function(k,v){

                $(this).on('click',overLayLoad);

            });

        })

    }

    return {

        init:colBlock

    }

});
define(['jquery'],function($){

    var colTab=function(){

        $(".col-nav-bar ul li").each(function(k,v){

            $(this).click(function(){

                $(".col-nav-bar ul li").eq(k).addClass('col-tab-link').siblings().addClass('col-context-hover').removeClass('col-tab-link');

                $(".col-context div").eq(k).addClass('col-context-active').siblings().addClass('col-context-hidden').removeClass('col-context-active');

            })

        })

    }

    return {

        init:colTab

    }

})

built.js

({

    appDir:'./',

    baseUrl:'js',

    dir:'../require-built',

    optimizeCss:'standard',

    paths:{

        domReady:"empty:",

        jquery:"empty:"

    },

    modules:[{name:'main'}]

})

cd require进入root，输入node r.js -o built.js进行压缩优化

requirejs 优化压缩的更多相关文章

  1. 用RequireJS优化Wijmo Web页面

    用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...

  2. 使用 RequireJS 优化 Web 应用前端

    基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...

  3. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  4. 提高性能：用RequireJS优化Wijmo Web页面

    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...

  5. PNG优化/压缩

    我们总是希望 PNG 图像的容量能够小些.小些.再小些.优化 PNG 图像,可以用以下几个工具: 1.Optipng Optipng 是命令行工具,直接在其后追加所需优化的 PNG 图像即可 2.Pn ...

  6. php如何优化压缩的图片

    php程序开发中经常涉及到生成缩略图,利用php生成缩略图这个过程本身没难度,但是你知道php能够优化调节生成的缩略图的质量吗?也就是说php能够控制生成缩略图的清晰度以及生成后的缩略图的体积.下面我 ...

  7. 使用RequireJS优化Web应用前端

    require.js官网:http://requirejs.org/docs/download.html 一篇不错的文章:http://www.csdn.net/article/2012-09-27/ ...

  8. 深入浅出的webpack构建工具---ParallelUglifyPlugin优化压缩(十)

    webpack默认提供了UglifyJS插件来压缩JS代码,但是它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩.所以说在正式环境打包压缩代码速度非常慢(因为压缩JS ...

  9. CSS优化压缩

    顾名思义缩写有简写意思,那就总结一下CSS缩写知识点.为什么要让CSS属性缩写?1.简化代码.一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节.加快网页下载速度和网页加载速度.2.优化 ...

随机推荐

  1. 国内最快的jquery cdn

    cdnjs.cn是cdnjs.com在国内的镜像服务,项目托管与著名的又拍云存储,目前又拍云在全国有几十个cdn节点,并且还在增加中. cdnjs.cn 托管的jquery相信会成为国内最快的jque ...

  2. windows 2008 下C#调用office组件访问拒绝的解决方法（failed due to the following error: 80070005 拒绝访问）

    "组件服务"- >"计算机"- >"我的电脑"- >"DCOM配置"->找到word->属 ...

  3. python 可变参数

    原文地址:http://docs.pythontab.com/python/python3.4/controlflow.html#tut-functions 一个最不常用的选择是可以让函数调用可变个数 ...

  4. BZOJ 4443: [Scoi2015]小凸玩矩阵 二分图最大匹配+二分

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=4443 题解: 二分答案,判断最大匹配是否>=n-k+1: #include< ...

  5. 【BZOJ】【2705】【SDOI2012】Longge的问题

    欧拉函数/狄利克雷卷积/积性函数 2705: [SDOI2012]Longge的问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 1275  Solv ...

  6. Sea.js入门

    本文只是seajs的入门贴.要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇: 前端模块化开发的价值 前端模块化开发的历史 ID和路径匹配原则 与RequireJS的异同 模块的加载启 ...

  7. vs2010 使用IIS EXPRESS出错.

      出现的问题:   解决方法: 左键单击Web项目,  查看属性选项卡, 将 托管管道模式改成Classic就可以了.

  8. WinHex分析PE格式（1）

    最近在一直努力学习破解,但是发现我的基础太差了,就想学习一下PE结构.可是PE结构里的结构关系太复杂,看这老罗的WiN32汇编最后一章 翻两页又合上了..把自己的信心都搞没了.感觉自己的理解能力不行, ...

  9. Ext Js学习之IIS理解

    站点分为静态网站和动态网站,纯粹利用html编写的网站属于静态网站,不宜维护和更新而利用C#+extjs等前台+后台技术编写的网站就属于动态站点,有更多的交互,易维护和更新,比如降价的页面,利用htm ...

  10. 10个jQuery插件分享

    原文:http://www.shejidaren.com/10-jquery-plugins.html blur.js blur.js是一个很有意思的插件,它能实现像WIN7 AERO效果的JS插件, ...