gulpでSassの自動コンパイルやブラウザのオートリロードを実行する方法

僕は普段からgulp.jsをよく使っています。
gulpはSassをコンパイルしたり、ファイル保存時にブラウザをリロードしたり、いろいろなことが出来るのでとても便利です。
今回は僕が普段から使っているgulpのプラグインや設定を紹介しようと思います。

gulpのインストール方法や使い方については触れませんので、gulpをインストールしていない場合や使い方が分からない場合は以下の記事を読んでみてください。
僕もいつも参考にさせていただいています。

絶対つまずかないGulp 4入門(2019年版) – インストールとSassを使うまでの手順 – ICS MEDIA

ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導…

ics.media

gulpを使ってやっていること
ディレクトリ構成
package.jsonの内容
gulpfile.jsの内容
gulpを実行する
画像を圧縮する
JSファイルを圧縮する
WordPressテーマ内で使用する
まとめ

gulpを使ってやっていること

僕がgulpを使ってやっていることは以下の通りです。

Sassファイルを保存時に自動でCSSファイルにコンパイルする
Sassファイル内に散乱したメディアクエリをCSSファイルでは1箇所にまとめる
Sassのソースマップを出力する
Sassのコンパイル時にベンダープレフィックスを追加する
ファイルの保存時にブラウザを自動でリロードして更新を反映する
画像ファイルを圧縮する
JSファイルを圧縮する

ディレクトリ構成

以下のディレクトリ構成を想定しています。

root/
├ css/
│ └ style.css
├ img/
│ └ base/
├ js/
│ └ script.js
├ scss/
│ └ style.scss
├ gulpfile.js
├ index.html
└ package.json

ディレクトリ構成を変更する場合は、後述するgulpfile.jsの内容を少し書き換える必要があります。

package.jsonの内容

package.jsonの内容は以下の通りです。

{
  "name": "gulp_demo", // 任意のプロジェクト名に変更してください
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "browser-sync": "^2.26.7",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^8.0.0"
  }
}

ターミナルでpackage.jsonと同じディレクトリに移動し、以下のコマンドを実行すると必要なnpmパッケージがインストールされます。

$ npm install

gulpfile.jsの内容

gulpfile.jsの内容は以下の通りです。

var gulp             = require('gulp');
var browserSync      = require('browser-sync');
var cleanCSS         = require('gulp-clean-css');
var uglify           = require('gulp-uglify');
var rename           = require("gulp-rename");
var imagemin         = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg  = require("imagemin-mozjpeg");
var sass             = require('gulp-sass');
var postcss          = require('gulp-postcss');
var autoprefixer     = require('autoprefixer');
var sourcemaps       = require('gulp-sourcemaps');
var postcss          = require('gulp-postcss');
var mqpacker         = require('css-mqpacker');

// ブラウザの自動更新
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: './',
      index: 'index.html'
    }
  });
});

gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});

// CSSコードの圧縮
gulp.task('mincss', function() {
  return gulp.src("css/*.css")
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('css/'));
});

// JavaScriptコードの圧縮
gulp.task('minjs', function() {
  return gulp.src("js/*.js")
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('js/'));
});

// 画像の圧縮
var imageminOption = [
  imageminPngquant({ quality: [0.65, 0.8] }),
  imageminMozjpeg({ quality: 85 }),
  imagemin.gifsicle({
    interlaced: false,
    optimizationLevel: 1,
    colors: 256
  }),
  imagemin.mozjpeg(),
  imagemin.optipng(),
  imagemin.svgo()
];

gulp.task( 'imagemin', function() {
  return gulp
    .src( './img/base/*.{png,jpg,gif,svg}' )
    .pipe( imagemin( imageminOption ) )
    .pipe( gulp.dest( './img' ) );
});

// Sassコンパイル
gulp.task('sass', function() {
  return gulp.src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([autoprefixer()]))
    .pipe(postcss([mqpacker()]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
});

// ファイル監視
gulp.task( 'watch', function() {
  gulp.watch( './scss/**/*.scss', gulp.task( 'sass' ) );
  gulp.watch("./js/**/*.js", gulp.task("bs-reload"));
  gulp.watch("./**/*.html", gulp.task("bs-reload"));
});

gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch")));

gulpを実行する

以下のコマンドを実行するとローカルサーバーが立ち上がり、ファイルの監視がスタートします。

$ npx gulp

htmlファイル、scssファイル、jsファイルを保存したら自動でブラウザがリロードされます。
また、scssファイルは保存時にcssファイルにコンパイルされます。

ちなみにindex.htmlにstyle.cssを読み込むのを忘れないように注意してください。

<!-- index.htmlの<head>内に追加してください -->
<link rel="stylesheet" href="css/style.css">

style.scss内で複数の箇所に書いたメディアクエリはstyle.cssでは1箇所にまとめられます。
また、ベンダープレフィックスも追加されます。

// style.scssに複数の箇所に書いたメディアクエリ
.hoge {
  font-size: 1rem;

  @media (min-width: 40em) {
    font-size: 2rem;
  }
}

.hogehoge {
  padding: 1rem;
  animation: fadeIn 1s ease;

  @media (min-width: 40em) {
    padding: 2rem;
  }
}

// style.cssでは1箇所にまとめられる
.hoge {
  font-size: 1rem;
}

.hogehoge {
  padding: 1rem;
  -webkit-animation: fadeIn 1s ease; // ベンダープレフィックスを追加
          animation: fadeIn 1s ease;
}

@media (min-width: 40em) {
  .hoge {
    font-size: 2rem;
  }
  .hogehoge {
    padding: 2rem;
  }
}

画像を圧縮する

root/img/base/ディレクトリ内に画像を保存して以下のコマンドを実行すると、圧縮された画像がroot/img/ディレクトリ内に保存されます。
jpegやpngはもちろん、svgも圧縮することが可能です。

$ npx gulp imagemin

JSファイルを圧縮する

以下のコマンドを実行するとscript.jsが圧縮されてscript.min.jsというファイル名で保存されます。

$ npx gulp minjs

WordPressテーマ内で使用する

ローカル環境で開発中のWordPressテーマ内で使用する場合は、browser-syncのオプションを変更しないといけません。
また、監視対象をhtmlからphpに変更する必要があります。

browser-syncのproxyオプションにローカル環境のWordPressサイトのURLを指定しておけば、ファイル保存時に自動でブラウザをリロードすることが出来ます。

WordPressテーマ内で使用する場合のgulpfile.jsは以下の通りです。

var gulp             = require('gulp');
var browserSync      = require('browser-sync');
var cleanCSS         = require('gulp-clean-css');
var uglify           = require('gulp-uglify');
var rename           = require("gulp-rename");
var imagemin         = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg  = require("imagemin-mozjpeg");
var sass             = require('gulp-sass');
var postcss          = require('gulp-postcss');
var autoprefixer     = require('autoprefixer');
var sourcemaps       = require('gulp-sourcemaps');
var postcss          = require('gulp-postcss');
var mqpacker         = require('css-mqpacker');

// ブラウザの自動更新
gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "http://demo.test/" // WordPressのURLを指定してください。
  });
});

gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});

// CSSコードの圧縮
gulp.task('mincss', function() {
  return gulp.src("css/*.css")
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('css/'));
});

// JavaScriptコードの圧縮
gulp.task('minjs', function() {
  return gulp.src("js/*.js")
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('js/'));
});

// 画像の圧縮
var imageminOption = [
  imageminPngquant({ quality: [0.65, 0.8] }),
  imageminMozjpeg({ quality: 85 }),
  imagemin.gifsicle({
    interlaced: false,
    optimizationLevel: 1,
    colors: 256
  }),
  imagemin.mozjpeg(),
  imagemin.optipng(),
  imagemin.svgo()
];

gulp.task( 'imagemin', function() {
  return gulp
    .src( './img/base/*.{png,jpg,gif,svg}' )
    .pipe( imagemin( imageminOption ) )
    .pipe( gulp.dest( './img' ) );
});

// Sassコンパイル
gulp.task('sass', function() {
  return gulp.src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([autoprefixer()]))
    .pipe(postcss([mqpacker()]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
});

// ファイル監視
gulp.task( 'watch', function() {
  gulp.watch( './scss/**/*.scss', gulp.task( 'sass' ) );
  gulp.watch("./js/**/*.js", gulp.task("bs-reload"));
  gulp.watch("./**/*.php", gulp.task("bs-reload")); // 監視対象をphpファイルに変更
});

gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch")));