Generate minifying js and css

Help
1

Enonic version: 6.4.1
OS: Windows 10

How could I generate minifying js and css?
How can I configure enonic in order to the final jar use the minifying files and disregarding the editable jar and css?

Thank you for your help

2

Hi,

Have a look on this gist how we use out build.gradle to minify and concatenate all JS-files, it also compiles Sass into CSS and minifies that too:

I then work with something like this as a structure.

Screen Shot 2016-02-29 at 14.19.46.png301Ă—446 12.8 KB

main.scss links to all other Sass-files, like a normal sass master file.
main.js contains my sites JS, and in /vendor/ I stuff all included javascripts (so that Gradle can append them first otherwise my code will crash). Inside vendor folder is /jquery/-folder, importent or else jquery will be called before it is included). Other than that this is pretty straight forward and no setup.

3

A different approach is to use a build system - like Gulp or Webpack - which gives you the opportunity to do a lot more than just minifying - like adding support for ES2015 and autoprefixing your CSS.

I’ve created some starter kits for Gulp and Webpack that will help you get started with these.

1 Like
4

I use a Gulp/Webpack setup for Enonic Market, which takes care of Sass compiling, JS/CSS/HTML minifying, JS concat with dependencies, JShint +++, so the approach mentioned by selbekk is a good way to go.

I am also planning to release a few starters with some of this functionality.

1 Like
5

Yes, like these two gentlemen suggest, using one of the starter packs that are already made for this, would be best.

But if you’re short on time, copy and paste from my gradle-file for now and then use one of the starters for your next project. They are extremely handy!

6

Hi bwe

Thank you for your piece of advice, However, I was trying your suggestion but when I just load the generate files I get these errors

Error.jpg1333Ă—187 21.1 KB

I try to load the jquery files too However, I get these errors

Error2.jpg1344Ă—416 47.2 KB

I appreciate your help

7

Hi Diego,

You should only have one file in the /jquery/ folder, the jquery library. Other extension scripts should be placed in root of the vendor-folder. It’s just to make sure that jQuery is included absolutely first.

Screen Shot 2016-03-01 at 15.06.42.png281Ă—193 9.2 KB

8

Hi bwe

I’m sorry but I get this error again.

Error3.jpg1322Ă—307 27.6 KB

9

Shouldn’t “all.js” be in the root js-folder? If that is custom for your site it should be there. Only vendor javascript (things you downloaded from somewhere) should go into the vendor folder. Only exception is jQuery that must sit in the /vendor/jquery/ folder because of the special reasons I’ve explained earlier =)

10

I changed the path of all.js and custom-min.js Nonetheless I get the same error. This is the punctual error

error4.jpg1322Ă—363 60.9 KB

11

Hi Diego,

The only JS-file you should be including on your website after using this gradle script is js/all.js

custom.min.js is generated by Gradle on build, so it should be no need to have it there already. The same goes for all.js. I have a file called main.js with all my JavaScript in it. Other than that, that folder is empty. Then in my html I include the all.js (a file I cannot see in the file system). When I then run gradle deploy I’ll get these files and it all works.

12

I needed to create a new folder in order to save the javascript that I have developed, so I included the new folder in the build.gradle. At last I did a clean of the project and It compiled fine

Thank you for your help

13

Anytime =)

It’s a bit tricky to setup the first time. But ones you have it in place it is wonderful.