Use Requirejs's r.js to pack CSS + JS

Recently used Requirejs to do a project, the realization of a modular development approach, through the declaration will rely on the introduction, effectively manage the dependencies between the modules, development is also methodical, but recently to go online, facing a packaging problem, because JS Modular, resulting in a lot of JS files, So you want to compress it into a file.

First, compression JS

1, first you have to have NODEJS environment, no can go to install a

2, you have to download r.js

3. Create a new Build.js

({  baseUrl: ".) /src/main/webapp/static/js ",  Name:" App ", Out  :". /src/main/webapp/static/js/main.js "})

4. Create a app.js file to introduce the modules that need to be packaged

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

Throw r.js with Build.js, then run the terminal command.

Node Build/r.js-o build/build.js

Finally, a main.js file is generated, the file is packaged and compressed JS file, in the page to be introduced.

Second, compression CSS

1. Create a Styles.css file that imports the CSS you need to compress

@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 ";

Then run the command

Node Build/r.js-o cssin=src/main/webapp/static/css/styles.css out=src/main/webapp/static/css/all.css optimizeCss= Standard

A all.css file is then generated, which can be introduced in the page.

However, there is a problem, that is, every time I need to modify the introduction of JS, CSS file path, which seems a bit unscientific

So I created a development with the release of the JSP file, the code directly into the development of the JSP, and then in the packaging when the two filenames replaced, packaging and then change back, on the line, since there is a solution to the idea, it is simple, The file I developed here is called css-js.jsp, and the production file is called css-js.production.jsp, which can then be packaged by the following command

MV src/main/webapp/web-inf/jsp/common/css-js.jsp SRC/MAIN/WEBAPP/WEB-INF/JSP/COMMON/CSS-JS.DEV.JSPMV src/main/ webapp/web-inf/jsp/common/css-js.production.jsp Src/main/webapp/web-inf/jsp/common/css-js.jspcall MVN Package- DMAVEN.TEST.SKIP=TRUEMV src/main/webapp/web-inf/jsp/common/css-js.jsp src/main/webapp/web-inf/jsp/common/ CSS-JS.PRODUCTION.JSPMV src/main/webapp/web-inf/jsp/common/css-js.dev.jsp src/main/webapp/web-inf/jsp/common/ css-js.jsp

OK, the remaining need to upload the war package to the server, and then restart the server, the way to upload the war has manual and automatic, automatic usually use ssh, or sftp upload, and then through SSH remote boot server, you can also write a script in the server, and then go to call, Or the deployment into Docker, and then restart the Docker container, roughly the same, the specific will not say, and this article does not tune.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Use Requirejs's r.js to pack CSS + JS