GulpでSASSのコンパイル手作業を自動化する３

前回はGulp(ガルプ)のタスク作成について学んでいきました。前回までGulp公式のGetting Startedを読み進めてきましたが内容の濃さにうへぇ～😩となってきましたので、今回は当初の目的である「SASSのコンパイル手作業を自動化するぞ」に立ち返り目的を達成できるよう挑戦したいと思います。

さて、初心者としてはガイドが欲しい訳でが、gulp-sassプラグインを公開しているサイトの説明がとっつき易く(英語ですけど)感じたのでそちらを参考にいたしました。

gulp-sass プラグイン

npm

 

6 users

gulp-sass

https://www.npmjs.com/package/gulp-sass

Gulp plugin for sass

gulp-sassパッケージをインストール

１行目で前回作成したプロジェクトフォルダに移動し、３行目のコマンドを実行しgulp-sassパッケージをインストールします。–save-dev (もしくは-D)オプションを付けることでローカルインストールを行います。 package.jsonの devDependencies に追記されます。ローカルインストールしたパッケージはプロジェクトフォルダ内に格納されます。

cd c:\inetpub\wwwroot\my-project

npm install node-sass gulp-sass --save-dev

・・(途中省略)・・
Binary is fine
npm WARN my-project@1.0.0 No description
npm WARN my-project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

+ gulp-sass@4.0.2
+ node-sass@4.12.0
added 118 packages from 124 contributors and audited 7583 packages in 80.336s
found 0 vulnerabilities

インストール中にワーニング(WARN)が出ましたがプロジェクトの説明など省略してるのは承知してるので無視、またWindows環境でサポートされていないパッケージが含まれてるようですが何かしら支障が出たら調べることにしてこのまま対応なしで進めました。

プロジェクトフォルダ内のディレクトリ構成を決めておきましょう。次のようにシンプルな構成にしました。足りないフォルダを追加しておきます。

my-project/
  ├css/
  ├images/
  ├js/
  └sass/
  gulpfile.js
  package.json

さらに動作確認のために適当なscssファイルをsassフォルダに格納しておきます。これがGulpのコマンドでcssファイルになればまずは成功です！

// サンプルSASS
.hoge {
  p {
    font-weight: bold;
  }
}

$fontColor: #333;

h1 {
  color: $fontColor;
}

さて、gulp-sassプラグインのページに掲載されているBasic Usageは次のコードになります。タスク名とその内容は次の通りです。

コードはGulp3までは一般的だったという task() 関数が使用されています。前回学んだ記述方法とは異なりますが、まずはこの通りにgulpfile.jsファイルを編集してみました。

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
sass.compiler = require('node-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Gulpのタスクを実行

プロジェクトフォルダでgulpコマンドを実行します。タスク名はsassです。

gulp sass

[16:02:39] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[16:02:39] Starting 'sass'...
[16:02:39] Finished 'sass' after 88 ms

タスクが正常終了したみたいですのでcssフォルダにcssファイルが出来ているか確認してみます。cssフォルダ内にstyle.cssファイルが作成されていました。内容も問題ないようです。SASSのコンパイルは成功です。

.hoge p {
  font-weight: bold; }

h1 {
  color: #333; }

SASSコンパイルの自動化

プロジェクトフォルダでgulpコマンドを実行します。タスク名はsass:watchです。

gulp sass:watch

c:\inetpub\wwwroot\my-project>gulp sass:watch
[16:22:48] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[16:22:48] Starting 'sass:watch'...
[16:22:48] 'sass:watch' errored after 9.55 ms
[16:22:48] Error: watching ./sass/**/*.scss: watch task has to be a function (op
tionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (c:\inetpub\wwwroot\my-project\node_modules\gulp\index.js:31:1
1)
    at c:\inetpub\wwwroot\my-project\gulpfile.js:15:8
    at taskWrapper (c:\inetpub\wwwroot\my-project\node_modules\undertaker\lib\se
t-task.js:13:15)
    at bound (domain.js:402:14)
    at runBound (domain.js:415:12)
    at asyncRunner (c:\inetpub\wwwroot\my-project\node_modules\async-done\index.
js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

実行エラーが出ました😟

gulp.parallel or gulp.series を使いなさい。と怒られているようです。Gulp3と4の非互換なのでしょうか、Gulp初心者にはこういう時の対処法が分からず困ります。調べたところ次のように修正すればよさそうです。 

・・(省略)・・ 
gulp.task('sass:watch', function () {
  //gulp.watch('./sass/**/*.scss', ['sass']);  // Gulp3
  gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});

再びgulpコマンドを実行します。タスク名はsass:watchです。

gulp sass:watch

[16:46:14] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[16:46:14] Starting 'sass:watch'...

今度は成功のようです、タスクが実行中(監視中)になったようです。

では早速scssファイルを変更して保存してみましょう。

// サンプルSASS
・・(省略)・・ 
$fontColor: #ccc; // ← #333 から変更

・・(省略)・・
h1 {
  color: #ccc; }

おおっ！リアルタイムにcssファイルが変換されていることが確認できます！繰り返し変更してもしっかりと追いついてきてくれています。

もちろんSASSの記述を間違えているとエラー内容を教えてくれます。

Error in plugin "sass"
Message:
    sass\style.scss
Error: Undefined variable: "$gege".
        on line 12 of sass/style.scss
>>   backgroundcolor: $gege;
   -------------------^

監視中のタスクを終了したい場合は「Ctrl + C」で確認が出てくるので「Y」と応えます。

[16:46:14] Starting 'sass:watch'...
[16:46:33] Starting 'sass'...
[16:46:33] Finished 'sass' after 77 ms
[16:46:43] Starting 'sass'...
[16:46:43] Finished 'sass' after 21 ms
[16:56:59] Starting 'sass'...
[16:56:59] Finished 'sass' after 17 ms
^CTerminate batch job (Y/N)? y

おめでとうございます！当初の目的である「SASSのコンパイル手作業を自動化するぞ」が達成できました😃

消化不良なのは実践で使ったコードはGulp3までは一般的だったという task() 関数が使用されていること。前回学んだGulp4から推奨しているエクスポートしてパブリックタスクにして..が全く活かせていません。今後も参考にしたGulp3コードがGulp4では動かない場面に遭遇しそうなので、次回はコードの書き直し方を調べておきたいと思います。

Gulp3のコードをGulp4に書きなおしてみた４ 構文エラーにハマる 前回はGulp(ガルプ)のgulp-sassパッケージを使ってSASSのコンパイルを自動化してみました。そのとき...