Craig Buckler - CSS: Tools & Skills

CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn, making CSS a great entry point for those new to programming. Indeed, its often the second language that developers learn, right behind HTML.

As CSS's feature set and abilities have grown, so has its depth. In this book, we'll be looking at essential CSS tools and skills for front-end developers today.

Code in this book is displayed using a fixed-width font, like so:

Where existing code is required for context, rather than repeat all of it, will be displayed:

Some lines of code should be entered on one line, but weve had to wrap them because of page constraints. An indicates a line break that exists for formatting purposes only, and should be ignored:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

In this article, we look at how you can use Gulp.js to automate a range of repetitive CSS development tasks to speed up your workflow.

Web development requires little more than a text editor. However, youll quickly become frustrated with the repetitive tasks that are essential for a modern website and fast performance, such as:

• converting or transpiling
• minimizing file sizes
• concatenating files
• minifying production code
• deploying updates to development, staging and live production servers.

Some tasks must be repeated every time you make a change. The most infallible developer will forget to optimize an image or two and pre-production tasks become increasingly arduous.

Fortunately, computers never complain about mind-numbing work. This article demonstrates how use Gulp.js to automate CSS tasks, including:

• optimizing images
• compiling Sass .scss files
• handling and inlining assets
• automatically appending vendor prefixes
• removing unused CSS selectors
• minifying CSS
• reporting file sizes
• outputting sourcemaps for use in browser DevTools
• live-reloading CSS in a browser when source files change.

All the code is available from GitHub, and it works on Windows, macOS or Linux.

A variety of task runners are available for web projects including Gulp, Grunt, webpack and even npm scripts. Ultimately, the choice is yours and it doesnt matter what you use, as your site/app visitors will never know or care.

Gulp is a few years old but stable, fast, supports many plugins, and is configured using JavaScript code. Writing tasks in code has several advantages, and you can modify output according to conditions such as only minifying CSS when building the final files for live deployment.

The task code assumes Gulp 3.x will be used. This is the most recent stable version and, while Gulp 4 is available, its not the default on npm. If youre using Gulp 4, refer to How do I update to Gulp 4? and tweak the gulpfile.js code accordingly.

Image file sizes will be minimized with gulp-imagemin which optimizes JPG, GIF and PNG bitmaps as well as SVG vector graphics.

Sass .scss files will be pre-processed into a browser-compatible main.css file. Sass isnt considered as essential as it once was, because:

• standard CSS now offers features such as variables (Custom Properties)
• HTTP/2 reduces the need for file concatenation.

That said, Sass remains a practical option for file splitting, organization, (static) variables, mixins and nesting (presuming you dont go too deep).

The resulting Sass-compiled CSS file will then be processed using PostCSS to provide further enhancements such as asset management and vendor-prefixing.

If youve never used Gulp before, please read An Introduction to Gulp.js. These are the basic steps for getting started from your terminal:

1. Ensure Node.js is installed.
2. Install the Gulp command-line interface globally with npm i gulp-cli -g.
3. Create a new project folder for example, mkdir gulpcss and enter it (cd gulpcss).
4. Run npm init and answer each question (the defaults are fine). This will create a package.json project configuration file.
5. Create a src sub-folder for source files: mkdir src.

The example project uses the following sub-folders:

• src/images image files
• src/scss source Sass files
• build the folder where compiled files are generated