How to Compile Sass with Gulp

These are my notes from automating Sass compilation using Gulp.

Detailed information can be found on the official website.

First, set up your folder structure as follows:

Installing Gulp:

sass$ npm init
sass$ npm install -D gulp-cli
sass$ npm install -D gulp
sass$ npm install -D gulp-sass

Create a gulpfile.js:

'use strict'

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
 return gulp.src('./_src/sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
  gulp.watch('./_src/sass/**/*.scss', gulp.task('sass'));
})

gulp.task('default',gulp.series('watch'));

Try running gulp:

sass$ npx gulp

This is the basic setup.

Further automation settings would be needed, but I found gulp to be cumbersome, so I stopped using it.

In the end, I opted for a simpler approach.

Setting up a Sass environment and simplifying HTML common parts

Web制作者のためのSassの教科書改訂2版

Amazon

楽天