560days 電脳備忘録

gulpfile.jsの設定

2019.01.25更新

gulpのバージョンアップに伴い書き方を変えないと自動コンパイルしてくれなくなったので困っていましたが、以前参照したサイトがver4に対応した書き方を掲載していてくれたのでそれを参照して書き直したところコンパイルを監視してくれるようになりました。


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

話は変わりますが、自宅のwindows環境だと3回に1回くらいコンパイルできていなくて不便なのでcompassを使ってコンパイルしてます・・・。


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'));
  });
});

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

投稿日
カテゴリ