Zenn
🥴

gulp(Sass) v4の環境構築(compile, watch) に関するメモ

2020/11/26に公開
Gulp
JavaScript
Sass
tech

概要

フロント開発をやる際に、わざわざCSSを記載することが面倒なので、いつもSassで記載するようにしています。というか、ほぼそれが常識みたいな感じになってますが。
そうすると、sass -> cssへのcompileが必要なので、そのための環境構築をするために gulp を使用します。
ただ、ネットで調べてもまだv3に基づく記載方法が多く残っており、個人的にはv4（task()とか使用せずに関数宣言する、など）でさっさと構築したいと思ってます。
なので、今回は表題の通り、gulp v4における環境構築を行いたいと思います。

ちなみに、今回gulpの環境構築に最低限行うnodeの設定やらは省略し、fileの中身の記載に限定しています。

実現させたい機能条件

  • 複数のsassファイルから1つのcssファイルへとcompileし、任意の場所に配置させたい。
  • watch機能を用いて、対象のsassファイルが更新され次第、随時compileしてほしい。
  • autoprefixer機能を用いて、クロスブラウザ対応を行いたい。

gulpfile.jsの中身（全体）

とりあえず、まずは今回記載したgulpfile.jsの中身です。ファイルの箇所などは、記事用に変更してあります。

// 1. moduleの定義
const
  { watch, parallel, src, dest } = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer');

// 2. sassからcssへcompileするための関数
const compileSass = () =>
  src('assets/sass/style.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(dest('assets/css'));

// 3. sassファイルの変更を監視するための関数
const WatchSass = () =>
  watch([
    'assets/sass/base/*.scss',
    'assets/sass/component/**/*.scss'
  ], compileSass);

// 4. export
exports.default = parallel(compileSass, WatchSass);

1. moduleの定義

const
  { watch, parallel, src, dest } = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer');
  • もちろん、今回は const で定義しています。
  • v3までは const gulp = require('gulp);' と定義すれば良かったが、v4では使用したい機能ごとに呼び出す仕様となっているっぽいです（後で確かめます）。
  • sassとautoprefixerに関しては、特にv3とは相違ないため、同じです。

2. sassからcssへcompileするための関数

const compileSass = () =>
  src('assets/sass/style.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(dest('assets/css'));
  • v3までは、ここは gulp.task() などで対応していたと思いますが、v4からは「非推奨（一応使用できる）」となっているため、関数に変更しました。gulp - creating tasks
  • sassの outputStyle は compressed に変更して、CSSのminify化を行っています。容量の削減ですね。
  • destは、v3では gulp.dest() と記載していたが、v4ではそもそもmoduleでrequireしていないのもあり、 dest() だけで大丈夫です。

3. sassファイルの変更を監視するための関数

const WatchSass = () =>
  watch([
    'assets/sass/base/*.scss',
    'assets/sass/component/**/*.scss'
  ], compileSass);
  • watchもv3に比べて簡潔に書きやすくなりました。
  • 監視対象のファイルは複数にしたかったので、arrowで記載しています。
  • watchの第2引数は、compileSassを当てることにしています。わざわざ gulp.task() を使用しなくてもいいのは結構ありがたいです。

4. export

exports.default = parallel(compileSass, WatchSass);
  • gulp.series() も使用しようかなとは思いましたが、 parallel() で十分でした。
  • ここも簡潔に、且つスッキリ見えるようになり、トータルで便利になりました。

感想

結構最初の頃は、gulpが意外に使いにくい（特にwatchの設定）と感じていました。
ただ、ここまで記述量が少なくなると、何が書いてあるかわかりやすいし、何をしたいのかもわかるので、今では大好きです。

Discussion