From the course: CSS: Refactoring Style Sheets

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Optimize CSS for delivery

Optimize CSS for delivery - CSS Tutorial

From the course: CSS: Refactoring Style Sheets

Start my 1-month free trial

Optimize CSS for delivery

- [Instructor] Since we're not working with a task runner and we have streamware, we have a development section and a production section. We are effectively compiling out the production code anyway so we might as well optimize that code for delivery to the browser. For css that means, compacting the css file down as much as possible by removing any unnecessary space, reducing the size of everything, and taking out comments and putting every single rule on a single line of text. There are several command line tools that do this. My favorite right now is cssnano. Which makes the css as small as possible, and of course there is a gulp version of cssnano and that's what we'll install in this project. In terminal, npm install gulp-cssnano save dev. As that installs, we can go to the npm page and look at the documentation for how cssnano works, and in this case, it's really straight forward. You simply decare cssnano and then all your css gets compacted. So, back in gulpfile.babel.js, I'll…

Contents