2021.03.22

Node.js

gulpのwatchメソッドでsassを自動コンパイル

gulpのwatchメソッドでscssファイルを常時監視し、scssファイルが更新されたタイミングでsassをコンパイルします。

gulpfile.jsにwatchFiles関数を追加して処理を記述します。watchメソッドの第一引数に監視対象のscssファイルのパスを指定します。scssファイル更新時にsassをコンパイルするstyles関数を実行します。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

function watchFiles() {
  //scssファイル更新時にsassのコンパイルを実行
  gulp.watch('./src/scss/**/*.scss').on('change', styles);
}

//gulp起動時、sassのコンパイル・scssファイルの監視を順番に実行
gulp.task('default', gulp.series(styles, watchFiles));

コマンドラインでCtrl+Cを押すとscssファイルの監視が終了できます。

関連記事

2021.02.12

Node.js

scss-lint.ymlの設定

Ruby製のscss-lintはscssのコードを検査して設定と異なる場合は警告してくれるツールです。ルールを記述する設定ファイルは拡張子ymlのファイルで作成…

2021.01.10

Node.js

npxでgulpを実行

npmはNode.jsインストール時に付属するパッケージ管理マネージャで、Node.jsのパッケージの管理や実行を取り扱うものです。Node.jsをインストール…

2021.03.19

Node.js

gulp-sass実行時のエラー対処法

Node.jsのメジャーバージョンが異なる環境の場合、gulp-sass実行時にnode-sassで以下のようなエラーが発生する場合があります。 npm ls …

2021.03.10

Node.js

npm run-scriptでgulpを実行

ローカルにインストールしたnpmパッケージの実行は、npxコマンドを利用するのが簡単です。以下のgulpfile.jsでテストします。各タスクのfunction…

2021.01.11

Node.js

npm initによるpackage.jsonの作成とパッケージのインストール

プロジェクトを作成するディレクトリでnpm initを実行してpackage.jsonを作成します。対話形式で作成しますが何も入力せずEnterキーで進めていく…

上に戻る