しばらくGulpを使っていないうちにバージョン4へと進化しており、昔使っていたgulpfile.jsがうまく動作しなくなっていた。

Gulpのバージョンを落とすことも考えたが、せっかくの機会なのでgulpfile.jsをバージョン4へ対応させることにした。

今回はHTML/CSSコーディングを行うためだけの環境として、Compassのビルド、ローカルサーバー立ち上げ、ライブプレビューを行うGulp環境を用意した。

パッケージのインストール

必要なパッケージは以下のとおり。

インストールはnpmコマンドで行う。

1
npm i --save-dev gulp gulp-autoprefixer gulp-compass gulp-plumber browser-sync

なお、Compassはgemで別途インストールしておく。
Compassの設定ファイル config.rbもルートディレクトリに用意しておこう。

ディレクトリ構造

ディレクトリは以下の構造とする。

./
./package.json
./gulpfile.js
./config.rb
./index.html
./sass/style.scss
./css/

gulpfile.js

gulpfile.jsコード全文を載せておく。

先ほどインストールしたパッケージがあれば、これで動作するはず。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const gulp    = require('gulp');
const plumber = require("gulp-plumber");
const compass = require('gulp-compass');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync');
 
//setting : paths
const paths = {
  'root'    : './',
  'html'    : './**/*.html',
  'cssSrc'  : './sass/**/*.scss',
  'cssDist'   : './css/',
  'compassConf': './config.rb'
}
 
//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');
 
//Sass
task('sass', function () {
  return (
    src(paths.cssSrc)
      .pipe(plumber())
      .pipe(compass({
        config_file: paths.compassConf,
        comments: false,
        css: paths.cssDist,
        sass: `${paths.root}sass`
      }))
      .pipe(autoprefixer({
        browsers: ['ie >= 11'],
        cascade: false,
        grid: true
        }))
      // .pipe(dest(paths.cssDist))
  );
});
 
// browser-sync
task('browser-sync', () => {
  return browserSync.init({
      server: {
          baseDir: paths.root
      },
      port: 8080,
      reloadOnRestart: true
  });
});
 
// browser-sync reload
task('reload', (done) => {
  browserSync.reload();
  done();
});
 
//watch
task('watch', (done) => {
  watch([paths.cssSrc], series('sass', 'reload'));
  watch([paths.html], series('reload'));
  done();
});
task('default', parallel('watch', 'browser-sync'));

gulpタスクの実行

gulpfile.jsでdefaultタスクを定義しているので、以下のコマンドを叩けばローカルサーバーが立ち上がる。

1
gulp

sassフォルダ内の*.scssファイルを更新すると、cssフォルダにコンパイルされたcssファイルが生成され、ブラウザ（ローカルサーバー）が自動リロードされるはずだ。