gulp sass - yagisawatakuya/Wiki GitHub Wiki

gulp-sass

・gulp-sass インストール

npm install gulp-sass --save-dev

・gulpfile.jsに下記記述

// プラグインを読み込む
var sass = require('gulp-sass');

// gulp で実行
gulp.task('default', ['watch', 'scss']);

// 監視
gulp.task('watch', () => {
  gulp.watch(`./src/**/scss/**/*.scss`, ['scss']);
});

「/**/」ミニマッチ scssディレクトリの間にディレクトリがいくつあっても、無くても対象とする

// scss - sassファイルコンパイル
gulp.task("scss", () => {
  //ファイルの参照先を指定
  gulp.src('./src/**/scss/**/*.scss', {base: './src/'}) // base - 階層構造を維持したまま出力
    // アプトプットスタイルにコンパイル
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    //処理を行ったファイルの保存先を指定
    .pipe(gulp.dest('./src/'));
});

// scss - sassファイルコンパイル
gulp.task("scss", () => {
  //ファイルの参照先を指定
  gulp.src('./src/**/scss/**/*.scss', {base: './src/'}) // base - 階層構造を維持したまま出力
    // アプトプットスタイルにコンパイル
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    //処理を行ったファイルの保存先を指定
    .pipe(gulp.dest('./src/'));
});