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

FLOCSS等、SASSでコーディングする際のGulp設定(個人用スニペット)を共有します。任意に編集いただいてご利用ください。

説明

必要なSCSSファイルはstyle.scss内で@importや@useを用いて読み込んでいます。

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("./"));
  });
});

設定

まとめ

エディターの拡張機能等でSASSファイルをコンパイルする方法もありますが、個人的にはGulp等でコンパイル用のタスクを走らせた方が柔軟に対応できて良いのではないかと思います。

ー この記事をシェアする? ー

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

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシー利用規約が適用されます。