560days 電脳備忘録

gulpfile.jsの設定

scssのコンパイルをcompassからgulpに変えて作業しています。
とりあえすscssをcss にコンパイルしてくれれば良いので下記のような設定で利用しています。


// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
 
// style.scssの監視タスクを作成する
gulp.task('default', function () {
  // ★ style.scssファイルを監視
  gulp.watch('scss/**/*.scss', function () {
    // style.scssの更新があった場合の処理
  
    // style.scssファイルを取得
    gulp.src('scss/**/*.scss')
      // Sassのコンパイルを実行
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassのコンパイルエラーを表示
      // (これがないと自動的に止まってしまう)
      .on('error', sass.logError))
      // cssフォルダー以下に保存
      .pipe(gulp.dest('css'));
  });
});

保存するたびに自動でコンパイルしてくれるので、しばらくはこれで事足りそうな感じ。

投稿日
カテゴリ