This article is part of a series about Starter Project, and this time I will explain all about Gulp tasks for CSS.
The idea of Starter Project is to have a single config file for all Gulp tasks. If you open
config.json file, you could see a section for CSS.
The first option is
run. If set to true, CSS Gulp tasks will be executed. There are three other mandatory options for CSS:
src- a path to a folder with Sass files,
dest- a path to a folder where compiled CSS files will be saved, and
clean- a path to a folder which will be cleaned before Gulp execution (almost always the same as
All paths are prepended with global
Starter Project uses Sass as a preprocessor for CSS. As it’s official website says, Sass is “CSS with superpowers.” A significant number of developers are supporters and users of this robust program. It has useful features like variables, functions, and mixins.
CSS with superpowers.
Starter Project uses gulp-sass plugin for compiling Sass to CSS.
gulp-cssimport is a plugin that allows import of linked files by including content to CSS file. This means you cannot use native CSS
@import implementation, but it is considered a bad practice in most cases anyway.
To use this plugin, add
@import statement in Sass file.
You could add
includePaths option to the
sassConfig settings to avoid writing full paths of the included libraries.
Starter Project has three libraries imported:
- Modular Scale, and
- Media Queries.
If your website looks inconsistent across different browsers, you probably want to use CSS technique to reset browser behavior. In Starter Project, Normalize.css is used for this task.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
sass-mq is a Sass mixin that helps a developer in composing media queries in an elegant way.
Starter Project uses gulp-autoprefixer plugin to add vendor prefixes to CSS files. This plugin is handy as developers don’t have to add these prefixes manually. In
config.json, you could add Autoprefixer options to
run option to
gulp-clean-css is a Gulp plugin that acts as a wrapper for clean-css. In Starter Project, this plugin is used for CSS minification. To create less confusion with file names,
gulp-rename plugin is used to rename minified assets by adding prefix or suffix to the file name.
Linting is the process of running a program that will analyze code for potential errors.
In Starter Project, gulp-stylelint plugin is used to lint CSS files. You could configure the plugin in
Default settings output error in a console as a string. See all available settings here.
Stylelint options are stored in
Stylelint also has its plugins. In Starter Project, stylelint-scss and stylelint-order plugins are used. Also, there are Stylelint Sass Guidelines that are used to extend default Stylelint settings. Learn more about Stylelint on the official website.
For all the VS Code users, here is the tip how to use Stylelint inside the editor. First, install stylefmt and Run On Save extensions for VS Code. Then call command palette by pressing
cmd + shift + p, and type
open workspace settings.
When you open the workspace settings, add these settings.
This should run stylelint when you save
.scss files. If it doesn’t work, [contact me](mailto: firstname.lastname@example.org?Subject=VSCode) for help.
In the previous article, I was trying to explain the idea for this project. This article should help you understand how Gulp could be used to optimize, lint and deliver best possible CSS output.
Starter Project is conceived as a boilerplate with latest best practices for generating the best possible outcome. If you have any idea or suggestion how this project could be better and more interesting, please [contact me](mailto: email@example.com?Subject=Starter), open an issue, or create a pull request on GitHub.
Please share! 🙏