Setting up a CSS build process with Gulp

Luca Spezzano
Jul 11, 2019 · 5 min read
Image for post
Image for post

What is a build process?

It’s essentially just a sequence of tasks that are performed automatically and generate the files ready to be deployed.
We are going to implement a CSS build process that will compile Sass, prefix and compress our CSS.

Why Sass?

CSS is getting more powerful day by day, there are many CSS methodologies (I wrote an article about CSS methodologies if you want to go deep in the argument) that help us to write more maintainable and scalable CSS code, but these methodologies alone aren’t enough to solve the problem of maintaining large CSS codebases.
That’s where Sass comes into play. Sass provides us features that regular CSS doesn’t have, using Sass we can write more readable, maintainable and reusable CSS code.

The packages

To develop our process we need to use some packages, let’s see together which one we will use and how they work.

  • gulp.dest(): usually it is a string that would be the destination path of the file once it will be processed;
  • gulp.watch(): it allows watching files and running the functions when a change occurs;
  • gulp.parallel(): it will execute the functions simultaneously;
  • browserSync.stream()is very useful for the css because it will change the CSS LIVE without to refresh the page;
  • browserSync.reload() that will reload the page automatically.

Let’s build the process

Image for post
Image for post
building our process
npm i -g gulp-cli
mkdir your-folder-name
cd your-folder-name
 src
| |
| assets
| | |
| | css
| | |
| | files
| | | |
| | | reset.scss
| | | |
| | | vendors.scss
| | | |
| | | element1.scss
| | |
| | |
| | main.scss
| |
| index.html
|
gulpfile.js
yarn init
yarn add gulp gulp-sass browser-sync gulp-autoprefixer gulp-clean-css gulp-rename gulp-purgecss --dev
yarn add bootstrap
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
rename = require('gulp-rename'),
purgecss = require('gulp-purgecss'),
browserSync = require('browser-sync').create();
function css() {
return gulp.src('./src/assets/css/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename(function(path) {
path.extname = ".min.css";
}))
.pipe(
purgecss({
content: ['public/**/*.html']
})
)
.pipe(gulp.dest('./public/assets/css/'))
.pipe(browserSync.stream());
})
function html() {
return gulp.src('./src/**/*.html')
.pipe(gulp.dest('./public/'));
})
function serve() {
browserSync.init({
server: {
baseDir: './public'
}
})
})
gulp.watch('./src/assets/css/**/*.scss', css);
gulp.watch('./src/*.html', html).on('change', browserSync.reload);
exports.default = gulp.parallel(html, css, serve);
gulp 
yarn
gulp 

NotOnlyCSS

This publication includes original articles and tips about…

Sign up for NotOnlyCSS

By NotOnlyCSS

Articles and tips for frontend developers Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store