Gulp. Minify CSS. Watch mode

Home » Tutorials » Developers tools » Gulp. Minify CSS. Watch mode
In this video we will continue working with Gulp. Today we’ll discuss css minification and eatch mode from gulp core api.
CSS minification is very important. task. Browser loads page quicklier with minified resources (css, js, html etc.). For css minification I use gulp-clean-css plugin.

In the second part of this video we’ll discuss watch mode. Watch method allows re-run gulp tasks while files changes detection, which are first param of this method. The second param are tasks (or single task), which will re-run after files change detection.

Code lesson (gulpfile.js)

const {src, dest, series, watch} = require('gulp');
const sass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');

function compileSass() {
    return src('./scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCss())
        .pipe(dest('./css'));
}

exports.default = function () {
    watch('scss/**/*.scss', compileSass);
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This