Simple Gulp Starter File for Sass

wetzel-gulp-sass.md

Gulp Starter

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var sass        = require('gulp-sass')(require('sass'));
var maps        = require('gulp-sourcemaps');
var postcss     = require('gulp-postcss');
var autoprefix  = require('autoprefixer');

gulp.task('serve', function () {
  // Serve files from the root of this project
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });

  gulp.watch("*.html").on("change", reload);
});

gulp.task('prod', gulp.series(function(){
  var processors = [
    autoprefix
  ];
  return gulp.src('./sass/**/*.scss')
    .pipe(maps.init())
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.reload({
      stream: true
    }));
}));

gulp.task('sass', gulp.series(function(){
  var processors = [
    autoprefix
  ];
  return gulp.src('./sass/**/*.scss')
    .pipe(maps.init())
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(maps.write('./'))
    .pipe(gulp.dest('./css'));
}));

gulp.task('sass-expanded', gulp.series(function(){
  var processors = [
    autoprefix
  ];
  return gulp.src('./sass/**/*.scss')
    .pipe(maps.init())
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(maps.write('./'))
    .pipe(gulp.dest('./css'));
}));


// Run 'gulp watch' to use Browser Sync and transpile CSS on file save
gulp.task('watch', gulp.parallel(['serve', 'sass-expanded'], function (){
  gulp.watch('./sass/**/*.scss', gulp.series(['sass-expanded']));
  gulp.watch('*.html', browserSync.reload);
  gulp.watch('./sass/**/*.scss').on("change", reload);
}));

// Run 'gulp sasswatch' to transpile CSS on file save (no browserSync, compressed)
gulp.task('sasswatch',  gulp.parallel(function (){
  gulp.watch('./sass/**/*.scss', gulp.series(['sass']));
}));

package.json

{
  "name": "andrea",
  "version": "0.1.0",
  "dependencies": {
    "autoprefixer": "^7.1.6",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-stylelint": "^13.0.0",
    "gulp-util": "^1.0.0",
    "sass": "^1.38.0",
    "stylelint": "^13.13.1"
  }
}

Updated for Gulp 4

Updated for gulp-sass 5