Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

William Mead
William Mead
9,937 Points

Use npm to minify and concatenate CSS files?

Is there something similar to uglify-js for CSS? Searching the NPM site has revealed lots of tools such as clean-css for minifying and concatenating CSS files, but they seem to all be intended for use inside your node website, or some of them have build tool versions for gulp or grunt, but not just for using npm as a simple build tool.

William Mead
William Mead
9,937 Points

Never mind. I answered my own question. clean-css has clean-css-cli which can be installed instead of clean-css with install clean-css-cli --save-dev. Then you can add something like:

"cleancss": "cleancss -o dist/allstyles.min.css flexslider.css styles.css"

into your script section of your package.js file and it will take the two stylesheets, flexslider.css and styles.css, concatenate them in that order, and then minify them into a big chunk of ugly code. Works perfectly.

1 Answer

William Mead Another package you might want to look into is webpack.js, gulp.js, and browserify.js. These packages compile your whole project and bundle all of your assets to minimize and concatenate all scripts, code, minifying images, etc. If you need to you can even just minify your .sass and .css with it.

William Mead
William Mead
9,937 Points

Yes, I have used Gulp, but I was looking for a solution for smaller projects where a full set up for gulp is not necessary, kinda in line with what this lesson is all about. Thank you Atoniolo.