Eric Bowden has over 19 years of software development experience around enterprise and departmental business productivity applications.
Initially, my project contained numerous CSS files, each containing a large volume of redundant and unused rules. I used the plugins below to perform a one-time cleanup of these CSS files, reducing 22,000 lines of css rules down to 2,500 lines!
- gulp-concat: Combine all of the CSS files into a single file.
- gulp-purifycss: Remove unused css rules.
- This plugin also normalized some of my nonstandard css rules which the next plugin, gulp-csso, was unable to read.
- gulp-csso: Restructure css into a single line, merge rules.
- gulp-css-purge: Purge duplicate css rules.
- gulp-out: Output the combined, purified, purged css rules into a single file.
You may notice that gulp-csso appears to be redundant with gulp-purifycss and gulp-css-purge. For this one-time optimization, I found that each of these plugins served a purpose and each of these performed optimizations which the other missed.
After the one-time tasks above completed, I performed the following:
- Reformatted the resulting css, presently all on one line, into a human readable form and checked this into source control, serving as the developer maintained source.
- Added gulp-csso as a task to be performed with each release build.
The one-time optimizations above resulted in a much lower volume of css for developers to maintain, and the gulp-csso task became part of the standard build, resulting in the leanest css for production deployments.
The registry at http://gulpjs.com/plugins/ includes over 2,300 plugins! Searching for those which perform css and javsascript optimizations results in dozens of potentially useful plugins to sift through; some work well with Angular apps and some don’t. Hopefully you can take a short-cut by starting with the plugins referenced above. Perhaps you’re using other plugins for your Angular apps or need more detail for how I used plugins in my app? Let’s discuss in the comments section below.