安装

requirejs

npm install -g requirejs

安装好后:

  • 找到刚刚requirejs的安装目录,在该目录下找到r.js,并拷贝待压缩合并项目的根目录下
  • 在项目根目录下创建build.js

build.js 示例

{
//The directory path to save the output.
//All relative paths are relative to the build file.
dir: "./build",
//All modules are located relative to this path
baseUrl: "./src",
//the main script of the project which contain the configuration for the app
//if set, all config below is not neccesory
mainConfigFile: './src/js/app.js',
//module you want to optimize(the entry file which require modules)
//path relative to the baseUrl
name: "js/app/rtest",
//out: 'js/app/build.js', //used in optimize one file
//fileExclusionRegExp: /^(app)\.js$/, //file which will be skipped
paths: { //path of files
'lodash': 'js/lib/lodash/dist/lodash',
'jquery': 'js/lib/jquery/dist/jquery.min',
'when': 'js/lib/when/when'
},
shim: {
'jquery': {
exports: '$'
}
}
}

配置

doc of build.js

运行

node r.js -o build.js

你会看到:build文件夹被创建,同步引入的文件被合并到入口文件中,异步文件保留。目录下的所有文件都被压缩。

GitHub地址:requirejs-optimize

参考资料: r.js 优化 RequireJS 项目(合并与压缩)

使用r.js进行前端repuirejs的合并压缩的更多相关文章

  1. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

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

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

  3. RequireJS 文件合并压缩

    RequireJS的define 以及require 对于我们进行简化JavaScript 开发,进行模块化的处理具有很大的帮助 但是请求加载的js 文件会有一些影响,一般的处理是对于文件进行压缩,但 ...

  4. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  5. AngularJS结合RequireJS做文件合并压缩的那些坑

    我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...

  6. ASP.NET MVC Bundle使用 合并压缩

    2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDe ...

  7. 应用r.js来优化你的前端

    r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...

  8. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

  9. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

随机推荐

  1. php时间选择器亲测可以自己修改

    由于前端的离职  造成我需要自己去做后台页面   所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...

  2. PHP实现简易的模板引擎

    PHP实现简易的模板引擎 1.MVC简介 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式(详情自己百度): 1. Mode ...

  3. 用vscode写博客和发布

    最近想开始写点博客什么的,然后看到在博客园注册了一个账号这么久,也没有写过文章,就想在博客园写点什么来刷个存在感,而且觉得用Markdown编辑器来写文章挺不错,但是博客园自带的Markdown编辑器 ...

  4. prepare—Article【准备篇】之SSH_tool#PuTTY

    第一:下载PuTTY: url :     http://www.openssh.com/ 下载界面: 安装后: 详解以上命令 ① ② PuTTYgen is a key generator. It ...

  5. JSP三大指令 /9大内置对象 /Javabean / EL

    一个jsp页面中,可以有0~N个指令的定义! 1. page --> 最复杂:<%@page language="java" info="xxx". ...

  6. Junit4 架构设计系列(2): Runner.run()与Statement

    Overall 系列入口: Junit4 架构设计系列(1): Request,ClassRequest 和 RunnerBuilder 前文中,我们基本理清了Junit4执行Case大体上的Flow ...

  7. Spring3+MyBatis3整合log4j无法输出SQL语句问题的解决

    今天遇到了跟下面文章一模一样的问题,下面文章的解决方案很好,在这里记录保存一下. Spring3+MyBatis3整合无法输出SQL语句问题的解决

  8. hadoop 各种counter 解读

    http://blog.sina.com.cn/s/blog_61ef49250100uxwh.html 经过了两天的休息与放松,精神饱满了吧?上星期我们学习了MapReduce的过程,了解了其基本过 ...

  9. vim自动补全

    Vim 中使用 OmniComplete 为 C/C++ 自动补全 OmniComplete 并不是插件的名字,而是 Vim 众多补全方式中的一种(全能补全).说白了 OmniComplete 其实就 ...

  10. Android 通过开源框架AsyncHttpClient进行get和post请求

    使用时无需将这些代码放入子线程去执行,因为其内部已经封装到一个线程中运行了! public void asyncHttpClientGet(View view) { AsyncHttpClient c ...