用 requirejs 的 R.js 打包css + js

时间：2021-08-08 03:44:58

最近用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容器，大致雷同，具体的就不说了，跟这篇文章不搭调.



标签：

相关文章