资讯专栏INFORMATION COLUMN

requireJS,rjs,gulp简易实现

kviccn / 2400人阅读

摘要:文件输出路径定义入口文件路径单入口输出路径要优化的模块说白了就是各页面的入口文件,相对的路径,也是省略后缀相对的路径定义依赖模块的路径运行点击参考文章文件合并

gulpfile.js

var gulp = require("gulp");
var rjs = require("requirejs");
gulp.task("build", function(cb){
  rjs.optimize({
    //文件输出路径  
    dir: "./vajoy",
    //定义入口文件路径
    baseUrl: "./rjs",
    //单入口
    //mainConfigFile:"./rjs/main.js",
    //name:"main",
    //输出路径
    //out:"./rjs/dist/build-main.js",
    modules: [                    //要优化的模块
      { name:"main"}            //说白了就是各页面的入口文件,相对baseUrl的路径,也是省略后缀“.js”
    ],
    optimize: "uglify",
    //相对baseUrl的路径,定义依赖模块的路径
    paths: {    
            a: "./js/a",
            jquery: "./js/jquery",
    }
  }, function(buildResponse){
    // console.log("build response", buildResponse);
    cb();
  }, cb);

//运行 gulp build

main.js

// JavaScript Document
require.config({
    baseUrl: "js",
    paths: {
      "jquery":"jquery",
           "a":"a"
    }
  });
require(["jquery","a"],function($,a){
    $("#btn").on("click",function(){
        a();
        })
    })

html




requireJS
 






参考文章
http://www.tuicool.com/articl... r.js
http://www.cnblogs.com/2050/p... gulp
http://m.blog.csdn.net/articl... require.js文件合并

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81151.html

相关文章

  • require.js学习记录

    摘要:工作方式为使用将每一个依赖加载为一个标签。然后在被浏览器加载完毕后,便会自动继承之前配置的参数。可以单独定义键值队数据,作为配置文件来使用还可以定义依赖的关系压缩使用来进行压缩时,需要指定文件。在链接中有很好的示例,可以参看学习。 1、简介 官方对requirejs的描述:RequireJS is a JavaScript file and module loader. It is o...

    邹强 评论0 收藏0
  • 【前端构建】RequireJS及其优化工具

    摘要:介绍一款模块加载工具的入门,并且重点介绍其优化工具。发布目录项目源代码工具目录,例如构建工具等。另外,前端代码发布前都会进行压缩,使文件足够小。原来是因为里了,所以优化工具把也合并进来了。而优化工具要用好,要多尝试他们的配置选项。 前端变化太快,如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具:RequireJS的入门,并且重点介绍其优化工具。 一、RequireJS简介...

    Loong_T 评论0 收藏0
  • Browserify简易入坑指南

    摘要:简要说明长处在于使用模块规范,而不是使用的模块规范,以及使用的模块规范。简单使用关于命令行工具使用,请参照官方文档。相同模块重复依赖模块重复依赖很容易理解,模块实现时可能分割为多个子文件实现,每个子文件内部可能会引用同一个模块,如。 简介 browerify: http://browserify.org/index.html browserify可以看做浏览器端的又一个模块...

    vpants 评论0 收藏0
  • angularjs + requirejs 完整的手脚架

    摘要:还记得一年半前转向后端的那种无助的感觉,独自一人摸黑走路,学习各种前端知识,走了不少弯路,现在终于算是入门了前端我相信不少人也有我当时同样的无助,所以我在空闲时间整理了下所用到的知识,便编写了一个手脚架,希望能给其他正学习前端的同学一些参考 还记得一年半前转向后端的那种无助的感觉,独自一人摸黑走路,学习各种前端知识,走了不少弯路,现在终于算是入门了前端~我相信不少人也有我当时同样的无助...

    anyway 评论0 收藏0
  • 模块管理的简单实现

    摘要:模块管理的简单实现方式,为什么会有这个东西方便组织你的代码,提高项目的可维护性。适用场景移动端页面,将注入到页面,这样就不用考虑模块加载的问题,从而节省了很多的代码,在实现上也更为的简单。 模块管理的简单实现方式 Keep It Simple,Stupid Q&A 1. 为什么会有这个东西? 方便组织你的代码,提高项目的可维护性。一个项目的可维护性高不高,也体现一个程序员的水平,在如今...

    roundstones 评论0 收藏0

发表评论

0条评论

kviccn

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<