はじめに
最近Swiftからかなり遠ざかっている気がしますが、私は元気です。
さて、CSSを書くためにSCSSを使うと、普段のコーディングと同じノリでラクに書けますよという話をしました。このSCSSをコンパイルしてCSSを作るわけですが、私は基本的に怠け者ですので、このコンパイルをもラクしたかったわけです。そして、ラクをするためには労を惜しまない怠け者の私はGulpに出会うわけです。
前提条件
Gulpの導入やもろもろのセッティングは割愛します。
npmでgulpとgulp-sassを使える状態にしておいてください。
Gulpとは？
本題に入る前にGulpとは何かを軽くご紹介。
タスクランナーというものです。簡単に言うと、人力でやっていた作業を自動的にやってくれます。Gulp公式サイトによると、色々な処理をパイプで繋げられるようです。
「色々な処理」もファイルの更新を監視したり、サードパーティのサービスから出力されたものを引き取ったり、ちょっと高級なことができるようです。AppleのAutomatorのようなイメージですかね。
第一印象ではシェルスクリプトの豪華版だと思っていましたごめんなさい。
SCSSをコンパイルするGulpタスクを作る
早速ですが、SCSSをコンパイルするGulpタスクを作ってみます。
調べながら知ったのですが、Gulpのバージョンによって書き方が違うようです。後学のために以前の書き方と新しい書き方の両方を試してみます。
Gulp3までの方法で書いてみる
GulpどころかCSSもSCSSもあやふやな状態ですが、調べつつ試行錯誤してタスクを作ってみました。Gulp3までの方法です。
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp
.src('./scss/**/*.scss')
.pipe(sass({outputStyle:'expanded'}))
.pipe(gulp.dest('./css'));
});タスク本体でやっていることは、ディレクトリ(scss以下すべて)の中にある拡張子がscssのものを読み込み、コンパイルをし、指定したディレクトリ(css)に順次保存します。3つの処理がパイプで繋がれて実行されます。
参考までに、outputStyleは出力されるCSSのレイアウトを決めるものです。expandedがお馴染みの見た目になるので読みやすいです。リリース時には別のを指定してCSSのサイズを小さくするのも良いかもしれません。
ここでは単純にコンパイルして指定ディレクトリへCSSファイルを保存するだけの単純なものなので、あまり恩恵は感じません。ですが、処理の流れ毎にタスクを分けたり、画像処理をかけたり、非同期処理なんかをやりだすと、威力を発揮するのでは無いかと思います。
今は若葉マークの初心者ということで、ひとまず簡単なタスクです。
task()が非推奨になったので、Gulp4の方法で書いてみる
できたできたとはしゃいでいたところ、task()が非推奨との情報を得ました。なんてこったい。task()でも動くようですが、できる限り新しい書き方に合わせていきたい。
公式ドキュメントに書かれているサンプルコードと見比べながら、書き直してみます。
const gulp = require('gulp');
const sass = require('gulp-sass');
function sassCompile() {
return gulp
.src('./scss/**/*.scss')
.pipe(sass({outputStyle:'expanded'}))
.pipe(gulp.dest('./css'));
}
exports.sass = sassCompile;違いは何か？
以前はgulp.task()の引数にタスク名とタスクの中身を書いていましたが、これが分離しました。
タスクの中身を書いておいて、別途タスク名と紐付ける形ですね。
関数(タスクの中身)は書いただけではnpx gulp [タスク名]などと使うことはできません。Gulpにタスクを紐付ける必要があります。それが最後の一文。exportsはパブリックにタスクを管理しているもの(？)のようで、タスク名と関数(タスクの中身)の紐付けをしています。
注意点
まず、関数(タスクの中身)は書いただけは使えません。必ずexportsでgulpコマンドで呼び出すタスク名との紐付けを行わないといけません。
また、パブリックタスクとして紐付けを行うということで、タスク名の重複に注意が必要です。今回は一つだけだったので問題は生じない(はず)です。ですが、タスクが増えた場合やファイルを分割したときなどは注意が必要かと思われます。まぁおそらく実行時になんらかのエラーが出ると思うので判るとは思いますが。
まとめ
今回はGulpのバージョンによる書き方の違いをご紹介しました。この他にも変更点があるようですが、それらは実際に遭遇してから都度確認していきましょう。せっかくなのでGulpももう少し掘り下げて、ファイルの変更監視や画像圧縮もしてみたいですね。
