【コピペ用】普段使いのSASS用gulpfile.jsテンプレート

const gulp = require("gulp");
var sass = require("gulp-sass")(require("sass"));
//ブラウザ対応
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
//@import "object/projects/**"等でscssファイルを一括読み込み
var sassGlob = require("gulp-sass-glob");
//エラー通知用
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
 
gulp.task("sass", function () {
  return gulp.watch("assets/scss/**/*.scss", function () {
    return gulp
      //assets/scss/**/*.scssに変更があった時に自動でassets/scss/style.scssのコンパイルを走らせる
      //assets/scss/style.scssにコンパイルが必要なscssファイルを@import等で取得する
      .src("assets/scss/style.scss")
      .pipe(plumber(notify.onError("Error: <%= error.message %>")))
      .pipe(sassGlob())
      .pipe(
        postcss([
          autoprefixer({
            overrideBrowserslist: [
              "last 2 versions",
              "Explorer >= 10",
              "iOS >= 9.0",
              "Android >= 4.1",
            ],
          }),
        ])
      )
      .pipe(
        sass({
          //outputStyle: "expanded",（確認用）
          outputStyle: "compressed",
        })
      )
      //gulpfile.jsと同じディレクトリにコンパイル
      .pipe(gulp.dest("./"));
  });
});