liferay-compress-css

A js function that integrates with Liferay theme gulp build task to compress /build css & gzip

• Uses clean css to minimize css & gzip to compress in Liferay 7.1 themes
• We use this together with Nginx
• This is a function that you can add right after your build stage
• This is a very rigid package and only minimizes the following files from your theme /build/css dir:- font_awesome.css - main.css - clay.css (only gzips doesn't minify because it errs on the local import)
  • if you would like it to handle more options, open an issue & we will try to make it more flexible for your use case

Install

$ npm install liferay-compress-css

Usage

• in your theme's gulpfile.js this is how you can compress the css right after the build step
• this will happen if gulp is run with gulp build or gulp deploy
• make sure to pass it done & gulp

const gulp = require('gulp');
const liferayThemeTasks = require('liferay-theme-tasks');
 
const compressCss = require('liferay-compress-css');
 
liferayThemeTasks.registerTasks({
    gulp: gulp,
    hookFn: function(gulp) {
        gulp.hook('after:build', done => compressCss(done, gulp));
    },
});

• if you don't want it to run when you are in development, just set NODE_ENV=development
• the way we do this is running cross env from npm scripts:

    "scripts": {
        "dev": "cross-env NODE_ENV=development gulp build"
    },

License

BSD-3-Clause