安装

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. [CSS]列表属性(List)

      CSS 列表属性(List) 属性 描述 CSS list-style 在一个声明中设置所有的列表属性. 1 list-style-image 将图象设置为列表项标记. 1 list-style- ...

  2. 在IT学习中的“认识论”

    先有“感性认识”,再有“理性认识”.这句经典认识论,在IT领域应用广泛. 一个项目,首先是分析需求,也就是功能层面,这相当于先有“感性认识”:然后才是具体的技术实现,也就是“理性认识”. IT学习分析 ...

  3. Objective-C的反射

          我第一次接触Java的时候就觉得整个反射包都很新颖,它使得Java和解释型的脚本语言更接近了,与此同时也拉开了和主流的C和C++的距离.在运行时可以窥视到一个对象的类元数据真的很不可思议, ...

  4. scrollview 例子2

    代码: #import "RootViewController.h" @implementation RootViewController @synthesize scrollVi ...

  5. bzoj 1079: [SCOI2008]着色方案 DP

    1079: [SCOI2008]着色方案 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 803  Solved: 512[Submit][Status ...

  6. 解读Hashtable

    http://perhaps.cnblogs.com/archive/2006/01/06/312335.html 昨天看到了叶漂兄的Post:<Hashtable的烦恼!>,文中提出有关 ...

  7. mysql 字段存储类型

    摘自:http://zuo.ai.xiao.blog.163.com/blog/static/6079155320121293750732/ 1.数字类型                        ...

  8. lc面试准备:Reverse Linked List II

    1 题目 Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1 ...

  9. 利用merge优化

    create table a1(TP_END_DATE NUMBER,WK_END_DATE NUMBER, MTH_START_DATE NUMBER, MTH_END_DATE NUMBER, T ...

  10. mysql排序,可以对统计的数据进行排序

    sql SELECT a.*,b.name as address_name,b.tel as address_tel,b.province as address_province,b.city as ...