`
zhouyrt
  • 浏览: 1162247 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用r.js压缩整个项目的JavaScript文件

    博客分类:
  • Node
 
阅读更多

r.js是RequireJS的一部分(optimizer)。它依赖于UglifyJS,而UglifyJS基于nodejs。r.js多数时候配合模块化(AMD)写法进行合并,压缩。如果你的代码不采用AMD方式,也可以用它来压缩。这篇讨论的是当不采用AMD方式组织代码时压缩整个项目的js文件。

 

假设项目中所有的js文件都在scripts目录中

 

myapp

    css

        a.css

        b.css

 

    html

         a.html

         b.html

 

    scripts

        base

            env.js

            event.js

            dom.js

            selector.js

        ui

            suggest.js

            dialog.js

    scripts-build

 

build.js

r.js

 

项目中有css,html,scripts三个目录,分别对应css,html和js文件。下载的r.js与myapp平行放置。

 

scripts-build目录放置压缩后的js文件,结构同scripts,但会多生成一个build.txt文件。

 

build.js文件是需要我们自己配置的,r.js会根据它去找被压缩的目录和压缩后的放置目录。大概如下

 

({
    appDir: "scripts",
    baseUrl: "scripts",
    dir: "scripts-build"
})
 

 

以下是我测试的项目(压缩前)

 

可以看到,scripts-build目前是空的。好了,开始压缩了。

 

1,cmd进入命令行控制台,我的项目在e:/work/myapp

 

2,cd到当前项目(进入e盘,cd work/myapp)

 

3,执行命令:node r.js -o build.js 效果如图

 

 

这时压缩成功了,再看scripts-build目录,和scripts结构一样,且多了个build.txt。

 

 

 

 

 

相关:

nodejs入门

Uglifyjs入门

 

  • 大小: 10.6 KB
  • 大小: 5.1 KB
  • 大小: 15 KB
0
0
分享到:
评论
1 楼 jamcode 2012-08-10  
不用Package.js,你Out了!
http://package-js.googlecode.com/

相关推荐

    js利用crypto进行"aes-128-cbc"解密压缩视频文件

    整个过程涉及到的JavaScript技术包括:对原始视频的读取与写入,AES-128-CBC加密和解密,以及gzip压缩和解压缩。这些技术结合在一起,实现了在客户端安全地播放受保护的视频文件,避免了内容的直接暴露。

    利用r.js打包模块化的javascript文件方法示例

    r.js(本地下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。本文将详细介绍r.js的相关...

    款让你的三维可视化项目快速落地の开源框架 永久开源免费商用 数字孪生 三维可视化 threejs webgl three.js

    从压缩包子文件的文件名称“icegl-three-vue-tres-master”来看,这可能是一个结合了Three.js和Vue.js的项目,命名为“IceGL”。Vue.js是一个流行的前端JavaScript框架,用于构建用户界面。将Vue.js与Three.js集成,...

    gzip压缩js,csss文件

    在IT行业中,优化网站性能是至关重要的,其中一种方法就是对JavaScript(js)和CSS(css)文件进行压缩。本文将详细讲解如何使用gzip工具来压缩这两种文件,以减少网络传输的数据量,从而提高网页加载速度。 gzip是...

    three.js教程

    【标签】:“thre.js javascript 程序框架” - three.js:这是一个基于WebGL的JavaScript库,用于在浏览器中创建和展示3D对象。它封装了WebGL的复杂性,提供了一个更友好的API,让开发者可以专注于内容创作,而非...

    Blender通过Three.js 导出json格式的导出器

    Blender是一款强大的开源3D建模和动画软件,而Three.js是JavaScript库,用于在Web浏览器中进行3D渲染。本教程将详细讲解如何利用Blender的io_three插件将模型导出为Three.js可读的JSON格式。 首先,我们需要了解io_...

    three.js-r144

    1. `.editorconfig` - 这是一个配置文件,用于在整个项目中保持一致的代码风格和格式。 2. `.gitattributes` - Git 特性文件,用于指定 Git 如何处理不同类型的文件。 3. `.gitignore` - 文件指示 Git 忽略哪些文件...

    javascript 实现压缩文件夹

    综上所述,这段代码实现了使用JavaScript进行文件系统操作、图片浏览以及压缩文件夹的基本功能。需要注意的是,这些操作在现代浏览器环境下可能无法直接运行,因为安全策略限制了脚本对本地文件系统的访问权限。

    rjs配合node压缩材料

    `r.js`可以作为Node.js的模块运行,利用Node.js的文件系统API读取和处理项目文件。这种组合使得整个构建过程可以在服务器端完成,不仅速度快,而且可以方便地集成到自动化构建流程中。 在实际使用中,`r.js`通常会...

    ThreeJS加载glb模型实用案例

    Three.js利用WebGL技术,这是一种基于OpenGL标准的JavaScript API,可以在浏览器上实现硬件加速的3D渲染。本篇文章将深入探讨如何使用Three.js加载glTF(GL Transmission Format)格式的3D模型,特别是一个名为...

    使用YUICompressor和DOS批处理脚本压缩JavaScript和CSS整理.pdf

    本文将详细介绍如何利用YUICompressor与DOS批处理脚本来高效地压缩JavaScript与CSS文件,同时结合IIS的GZIP功能进一步提高压缩率。 #### 二、YUICompressor简介 **YUICompressor**是由Yahoo!公司推出的一款开源...

    nwjs资源包 NWjs打包桌面程序

    1. **基本结构**:一个nw.js应用通常包含`index.html`作为主页面,`package.json`作为项目配置文件,以及可选的JavaScript代码和资源文件(如CSS、图片、字体等)。`package.json`文件用于定义应用的元数据,比如...

    fanc.rar_dependency_javascript

    同时,通过CDN(内容分发网络)加载库、合并和压缩JavaScript文件、启用HTTP2等策略,可以提升应用性能。 总之,"fanc.rar_dependency_javascript"这个压缩包很可能是Spring开发所需的前端JavaScript依赖,其中的...

    前端项目-ractive-require.zip

    5. **优化技巧**:了解 RequireJS 的优化工具 r.js,如何通过它来合并和压缩JavaScript文件,进一步提升性能。 总之,“前端项目-ractive-require.zip”为开发者提供了一个实践 Ractive.js 和 RequireJS 结合的最佳...

    tif_demo.zip

    在本项目中,"tif_demo.zip" 是一个包含Spring Boot应用程序的压缩文件,该程序旨在演示如何在前端使用tiff.js库来展示由后端返回的TIFF(Tagged Image File Format)图像文件。TIFF是一种广泛用于存储高质量图像的...

    Node.js-使用Electron构建的GooglePlay音乐桌面播放器

    从压缩包子文件的文件名称 "pmsaue0-play-851319b" 我们无法直接获取具体的技术细节,但可以推测这是项目的一个版本标识或者是构建输出的文件夹名称。实际的源代码、资源文件和其他项目组成部分通常会在这个目录结构...

    Modules03. Optimizer 模块化代码优化器.pdf_前端学习资料

    **RequireJS Optimizer**:这是一个针对使用RequireJS的项目的代码优化工具,它可以利用UglifyJS或Closure Compiler来合并和压缩JavaScript及CSS代码。UglifyJS需要Node.js环境,而Closure Compiler则依赖Java。 **...

Global site tag (gtag.js) - Google Analytics