gulp-sass 5へアップデート 書き方の確認

webあれこれ

タスクランナーである「Gulp.js」でなにやらエラーがありました。

gulp-sassの大幅なアップデートがあったようです。

バージョンアップを行う

公式サイトを見るとようやくわかりました。

gulp-sass
Gulp plugin for sass

なにやら、あなたのgulpfileを書き直してください…とのことです…

「-がついてるものは、もう非推奨です。+の方を使ってください。」とのことでした。

公式サイトを翻訳してまとめました。

gulp-sassバージョン5にはNode12以降が必要です。

・読み込み方が変更しました。

現在使用中のgulpのバージョンはターミナルで確認できます。

//Node.jsのバージョン確認
$ node -v 

//gulpのバージョン確認
$ gulp -v  

node.jsは公式サイトでもインストール可能です。バージョンアップも同じ方法。
※推奨されているバージョンをインストールしてください。

//ローカルファイルにgulpをインストール
$ npm install sass gulp-sass --save-dev

//または(Dは--save-devの略)
$ npm install -D gulp

//うまくいかなければアンインストールしてやり直す --globalか-Dかは環境による
$ npm rm --global gulp-cli 

インストールしたらちゃんとバージョンが変わっているか確認してみてください。

読み込み方の変更点

今までのコードは…

var sass = require('gulp-sass');

これからは…↓↓↓

const sass = require('gulp-sass')(require('sass'));

公式サイトはvarが書いてありましたが、varではなくて、constやletでも可能です。

【おさらい】gulp3→gulp4への変更点

gulp4になったときにgulp.taskという書き方は非推奨になってしまいました‥‥。

今回のgulp5へのアップデートでこれはまずいと思ったので、全て一新して書き直すことにしました!
※非推奨なだけであってまだ使用できます。

gulp.task()が非推奨 → 関数宣言とexportsが推奨へ。
gulp.watch()の第二引数が配列から関数名へ。
series()parallel()が使用できるようになった。

参考文献
https://qiita.com/manabuyasuda/items/0971dbd3729cf68f87fb

新しい書き方

//分割代入を使って、使用する関数を取り出す
const { src, dest, watch, series } = require('gulp');

const cssSass = () => {
	return src('./css/**/*.scss') //コンパイル元
	.pipe()
        //以下お使いのプラグインの処理を.pipeで書く


	
	.pipe(dest('./css'))     //コンパイル先
   }
   // タスクをまとめて実行 exports.のあとはコマンド名。gulp sassで実行できる。
exports.sass = series(cssSass);

JavaScriptのES6の書き方をしています。
関数名は任意。

taskに慣れすぎていていましたが、ES6を見慣れていたらむしろこちらの書き方の方がわかりやすい!

ejsでエラーが発生!?

【追記】上記のreturn文ではなぜかejsの場合はエラーが起きました。
returnを使わない場合は、引数を設定して、{}内で実行します。※公式サイトのやり方です。

const htmlEjs = (done) => {
	gulp.src(["ejs/**/*.ejs", "!ejs/**/_*.ejs"])
		.pipe(ejs())
		.pipe(rename({ extname: ".html" })) //拡張子の指定
		.pipe(replace(/[\s\S]*?(<!doctype)/, "$1")) //冒頭の余白削除
		.pipe(dest("./"))

	done();
};
exports.ejs = series(htmlEjs);

renameの書き方も変わっているので、gulp-ejsの公式サイトのそのままをいれています。

seriesとparallelの使い方

公式サイトにseries()とparallel()の使用方法もありました。
両方を使った書き方もありました。いろいろ使えそうです。

series() ・・・直列で処理します。順番を明確にしたいとき。

parallel() ・・・並列で処理します。順番がどうでもよいとき。

//例
exports.build = parallel(css, javascript);
//parallelを入れることもできる
exports.build = series(clean, parallel(css, javascript));

Watchの書き方

//watch設定
exports.watch = () => {
	watch('./css/**/*.scss', cssSass )
};

※cssSassは任意の関数名です。
※コマンド名は任意です。

便利なコマンドメモ

package.jsonに記載されているプラグインの古いかどうか

$ npm install npm-check-updates -g

以下のコマンドで確認することができます。

//プラグインが古いかどうかチェック
$ncu

//プラグインを最新にアップデート
$ncu -u
タイトルとURLをコピーしました