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 - CSS Tutorial
From the course: CSS: Refactoring Style Sheets
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.