【Gulp】Sassのコンパイルと自動リロード環境を構築する方法

フロントエンド開発では、Sassを使った効率的なスタイル管理とブラウザの自動リロードによる即時反映が欠かせません。Gulpを活用すれば、これらを自動化した快適な開発環境を簡単に構築できます。ここではGulp v4を前提に、Sassコンパイルと自動リロード環境を整える方法を解説します。

環境準備

まずはGulp本体と必要なプラグインをインストールします。

npm install --save-dev gulp gulp-sass sass gulp-postcss autoprefixer browser-sync

– gulp-sass + sass: Sassのコンパイル用
– gulp-postcss + autoprefixer: ベンダープレフィックスの自動付与
– browser-sync: ローカルサーバーと自動リロード

ディレクトリ構成

一般的な構成は以下の通りです。

project/
├─ gulpfile.js
├─ package.json
├─ src/
│   └─ scss/
│       └─ style.scss
└─ dist/
    └─ css/

gulpfile.jsの設定

Gulp v4ではタスクを関数として定義し、seriesやparallelで管理します。

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync').create();

// Sassコンパイル
function compileSass() {
  return src('src/scss/**/*.scss')
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(dest('dist/css'))
    .pipe(browserSync.stream());
}

// ローカルサーバーと自動リロード
function serve() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
  watch('src/scss/**/*.scss', compileSass);
  watch('dist/*.html').on('change', browserSync.reload);
}

// デフォルトタスク
exports.default = series(compileSass, serve);

実行方法

以下のコマンドでSassの監視と自動リロードが有効になります。

npx gulp

http://localhost:3000 にアクセスすると、Sassを編集して保存するたびにスタイルが即時反映されます。

応用ポイント

– outputStyleをcompressedにすると本番用に圧縮CSSを生成可能
– autoprefixerの設定はbrowserslistと連動させて制御できる
– BrowserSyncはプロキシ設定も可能なため、WordPressなど動的環境でも利用できる

まとめ

Gulpを使えばSassのコンパイルと自動リロードを簡単に自動化できます。これにより開発効率が大幅に向上し、スタイルの調整も快適になります。まずは基本構成を作り、必要に応じて圧縮や最適化処理を追加して自分のプロジェクトに合わせたワークフローを構築しましょう。