This article is part of a series about , and this time I will explain all about Gulp tasks for CSS. Starter Project Settings The idea of Starter Project is to have a single config file for all Gulp tasks. If you open file, you could see a section for CSS. [config.json](https://github.com/maliMirkec/starter-project/blob/master/config.json) The first option is . If set to true, CSS Gulp tasks will be executed. There are three other mandatory options for CSS: run - a path to a folder with Sass files, src - a path to a folder where compiled CSS files will be saved, and dest - a path to a folder which will be cleaned before Gulp execution (almost always the same as option). clean dest All paths are prepended with global _root_ path. Other options are for , , , and . gulp-cssimport gulp-autoprefixer gulp-rename gulp-sourcemaps Sass Starter Project uses 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. Sass CSS with superpowers. Starter Project uses plugin for compiling Sass to CSS. gulp-sass Imports is a plugin that allows import of linked files by including content to CSS file. This means you cannot use native CSS implementation, but it is considered in most cases anyway. gulp-cssimport @import a bad practice To use this plugin, add statement in Sass file. @import // Plugins@import ‘normalize’;@import ‘modularscale’;@import ‘mq’; // Configuration@import ‘variables’;@import ‘fonts’;@import ‘locks’;@import ‘helpers’;@import ‘typography’;@import ‘theme’; You could add option to the settings to avoid writing full paths of the included libraries. includePaths sassConfig “sassConfig”: {“includePaths”: [“./node_modules/modularscale-sass/stylesheets/”,“./node_modules/sass-mq/”,“./node_modules/normalize.css/”,“./src/scss/”,“./src/scss/components”]}, Sass Libraries Starter Project has three libraries imported: Normalize.css, Modular Scale, and Media Queries. @import ‘normalize’;@import ‘modularscale’;@import ‘mq’; If your website looks inconsistent across different browsers, you probably want to use CSS technique to reset browser behavior. In Starter Project, is used for this task. Normalize.css Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Nicolas Gallagher helps with font size consistency. is a list of values that are used to size type and create a sense of harmony in design. Modular Scale modularscale-sass is a Sass mixin that helps a developer in composing media queries in an elegant way. sass-mq Autoprefix Starter Project uses plugin to add vendor prefixes to CSS files. This plugin is handy as developers don’t have to add these prefixes manually. In , you could add to settings. gulp-autoprefixer config.json Autoprefixer options autoprefixedConfig “autoprefixedConfig”: {“browsers”: [“last 5 versions”],“cascade”: false}, Source maps Source maps allow developers to see the source code for compressed assets. In Starter Project, plugin is used to create source maps for CSS and JavaScript files. If your environment doesn’t require source maps, you could disable it by setting option to in . gulp-sourcemaps run false sourcemapsConfig “sourcemapsConfig”: {“run”: true} Minifying is a Gulp plugin that acts as a wrapper for . In Starter Project, this plugin is used for CSS minification. To create less confusion with file names, plugin is used to rename minified assets by adding prefix or suffix to the file name. gulp-clean-css clean-css gulp-rename “renameConfig”: {“suffix”: “.min”} Linting Linting is the process of running a program that will analyze code for potential errors. Source: StackOverflow In Starter Project, plugin is used to lint CSS files. You could configure the plugin in file. gulp-stylelint config.json “styleLintConfig”: {“reporters”: [{“formatter”: “string”,“console”: true}]}, Default settings output error in a console as a string. See all available settings . here Stylelint options are stored in file. .stylelintrc {“plugins”: [“stylelint-scss”,“stylelint-order”],“extends”: “stylelint-config-sass-guidelines”} Stylelint also has its plugins. In Starter Project, and plugins are used. Also, there are that are used to extend default Stylelint settings. Learn more about Stylelint . stylelint-scss stylelint-order Stylelint Sass Guidelines on the official website Bonus For all the VS Code users, here is the tip how to use Stylelint inside the editor. First, install and extensions for VS Code. Then call command palette by pressing , and type . stylefmt Run On Save cmd + shift + p open workspace settings When you open the workspace settings, add these settings. {“emeraldwalk.runonsave”: {“commands”: [{“match”: “\\.scss?$”,“cmd”: “cd ${workspaceRoot} && stylefmt -c .stylelintrc ${file}”}]}} This should run stylelint when you save files. If it doesn’t work, for help. .scss contact me Conclusion , 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. In the previous article 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 , open , or create on . Starter Project contact me an issue a pull request GitHub Please share! 🙏 Originally published at www.silvestarbistrovic.from.hr .

Harmony

My first year of freelancing

Gulp tasks for CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2018: My Technology Retrospective

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

2018: My Technology Retrospective

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps