用 requirejs 的 R.js 打包css + js

最近用requirejs做了一个项目,实现了模块化的开发方式,通过声明将依赖引入,有效的管理了各个模块之间的依赖关系,开发也有条不紊的进行,但是最近要上线,就面临着一个打包的问题,因为js模块化,导致js文件很多,所以要将其压缩成一个文件。

一、压缩js

1、首先你要先有nodejs环境,没有可以去装一个

2、你得下载R.js

3、新建一个build.js

({
  baseUrl: "../src/main/webapp/static/js",
  name: "app",
  out: "../src/main/webapp/static/js/main.js"
})

4、创建一个app.js文件,把需要打包的模块都引入

define(['A','B','C','D','E'], function () {
})

把R.js 跟 build.js 丢一起,然后运行终端命令

node build/r.js -o build/build.js

最后会生成一个main.js文件,这个文件就是打包压缩后的js文件,在页面引入即可。

二、压缩css

1、创建一个styles.css文件,里面导入你需要压缩的css

@import "bootstrap.min.css";
@import "easyui/easyui.css";
@import "jquery.dataTables.min.css";
@import "font-awesome.min.css";
@import "main.css";
@import "metisMenu.min.css";

然后运行命令

node build/r.js -o cssIn=src/main/webapp/static/css/styles.css out=src/main/webapp/static/css/all.css optimizeCss=standard

之后会生成一个all.css文件,在页面引入即可。

但是,但是这有一个问题,就是每次打包我都需要修改引入的js、css文件路径,这好像有点不科学

于是我便创建了一个开发跟发布用的jsp文件,代码里面直接引入开发的jsp,然后在打包的时候把这两个文件名替换一下,打包完再改回来,就行了,既然有了解决思路,那就简单了,我这里开发的文件叫css-js.jsp,生产的文件叫css-js.production.jsp,通过下面的命令即可然后打包工作

mv src/main/webapp/WEB-INF/jsp/common/css-js.jsp src/main/webapp/WEB-INF/jsp/common/css-js.dev.jsp
mv src/main/webapp/WEB-INF/jsp/common/css-js.production.jsp src/main/webapp/WEB-INF/jsp/common/css-js.jsp
call mvn package -Dmaven.test.skip=true
mv src/main/webapp/WEB-INF/jsp/common/css-js.jsp src/main/webapp/WEB-INF/jsp/common/css-js.production.jsp
mv src/main/webapp/WEB-INF/jsp/common/css-js.dev.jsp src/main/webapp/WEB-INF/jsp/common/css-js.jsp

OK,剩下的需要把war包上传到服务器,然后重启服务器即可,上传war的的方式有手动跟自动的,自动的通常使用ssh,或者sftp上传,然后通过ssh远程启动服务器,也可以在服务器写一个脚本,然后去调用,或者是部署到docker里面,然后重启docker容器,大致雷同,具体的就不说了,跟这篇文章不搭调.

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-11 05:13:19

用 requirejs 的 R.js 打包css + js的相关文章

requirejs 使用实例r.js打包

在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install [email protected]1.11.1 --save 创建基本目录: js/main.js&test.js css/index.css index.html build.js copy requirejs目录下的r.js到根目录 创建导出目录:one 测试目录创建完成! index.html <!DOCTYPE html> <

requirejs 多页面,多入口js文件打包总结

需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控制?我们是这样控制的,代码如下: <script src="${resource}/js/base/require.js" data-main="${resource}/js/accountMain"></script> 这个${resource

requireJs和r.js压缩工具

上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: main.html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello RequireJS</title> </head

转载 r.js打包经验

例子1 先是HTML页面 <!DOCTYPE html> <html>     <head>         <title>My App</title>         <link rel="stylesheet" type="text/css" href="css/main.css">         <script data-main="scripts/m

r.js 打包压缩文件(依赖require)

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求. 要使用r.js需下载r.js文件( 点我下载 ),将其放到你的项目根目录:还需要安装nodeJS(点我下载),以便通过命令行来执行r.js功能. 下面是我项目 幸福来敲门的目录结构.从index.html结构的data-mian可以看出模块的入口是app.js. app.js里面是这样一小段代码: 注释

【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

ASP.NET MVC 4使用Bundle的打包压缩JS/CSS

打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS文件案中空白.批注及修改JavaScript内部函数.变量名称的压缩手法,能有效缩小文件案体积,提高传输效率,提供使用者更流畅的浏览体验. 在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度.更为重要的是通过捆绑可以解决IE浏览

webpack的最简单应用,只使用js与css的打包

cmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack 接着需要packjson.sj文件,全部enter掉就好了,默认值就行了 npm init 接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表 npm install --save-dev style-loader css-loader 在项目文件夹新建webpack.config.js,我的内容如下 var webpack = require('web

在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)

转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简