Real Quick Gulp SCSS to CSS setup for small project

Home » Real Quick Gulp SCSS to CSS setup for small project

Ever wanted to just quickly squish SCSS into your small project? It’s node so there is a bit of faffing and cramming modules everywhere, but here’s a quick, small setup

Initiate a Node project & install Gulp and Gulp CLI.

$ npm init -y 
    $ npm i --global gulp-cli
    $ npm i gulp --save-dev

Install the gulp-sass plugin and the del module

$ npm i --save-dev gulp-sass
    $ npm i --save-dev del

Project structure will be:

index.html (link to css/app.css)
gulpfile.js (you create this empty file)
node_modules (node will have added these)
package-lock.json(node will have added these)
package.json(node will have added these)
inc(folder)
SASS(folder)
— app.scss
CSS(folder)
— app.css

here is what you need to add to the gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const del = require('del');
gulp.task('styles', () => {
    return gulp.src('inc/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('inc/css/'));
});
gulp.task('clean', () => {
    return del([
        'inc/css/app.css',
    ]);
});
gulp.task('default', gulp.series(['clean', 'styles']));
gulp.task('watch', () => {
    gulp.watch('inc/sass/**/*.scss', (done) => {
        gulp.series(['clean', 'styles'])(done);
    });
});

Finally:

then run the command “gulp watch” and start writing your SCSS

Thanks to http://zetcode.com/gulp/sass/ from where I borrowed most of this and rearranged to suit my own structure