triBlog

トリアナのブログ。

WEB制作
フロントエンド

【Gulp4】面倒なあれこれにさようなら!複数の作業を自動化するタスクランナー

本当は歯磨きもお風呂も自動化したい
ライター画像
おくだ

こんにちは。ブログ書くたびに文体がラフになってるインターンの奥田です。
今日は久々のテック系記事です(⌒▽⌒)
(前回はEFOについてでした!)

今回は作業を効率化するのに非常に便利なタスクランナーを導入しましたのでご紹介します。
採用したのはGulp。真っ赤なジュースのアイコンのあれです。
今回はあれでSassのコンパイルや画像の圧縮などを自動化していきます。
もう面倒な作業に時間は取られません!

※全ての端末およびバージョンを想定しているわけではありません。

Gulpの概要

Gulpとは

まずGulpてなんやねんって感じですよね。
作業(タスク)をプログラムで自動化してくれるものを全般的にタスクランナーって言うんですが、
Gulpはそのタスクランナーのうちの1つです。
導入コストはかなり低いほうだと思うので、フロントエンドエンジニアだけでなく、コーダーさんやデザイナーさんにもオススメです。

Gulpでできること

  • Sassのコンパイル(SassをCSSに変換)
  • Babelによるトランスパイル(ES6で書かれたJSをES5に変換)
  • Autoprefixer(ベンダープレフィックスを自動で付与)
  • 画像の圧縮

今回自動化するタスクは上に挙げた4つですが、
他にももっとたくさん自動化できるタスクはあります。それはまたのちのち。

Gulpの導入

便利な機能を追加していく前に、まずGulp本体をインストールします。
Macの方はターミナルを開いてください。
そうです。あの黒い画面です。
なんのこっちゃない、今回は書いてあるコマンドをコピーして貼り付けるだけです。

前提

本記事は以下の条件を前提として話を進めていきますので、
予めご了承下さい!

  • JavaScriptの基本的な記述ができる(変数、定数の代入など)
  • エディタの基本的な操作ができる(ファイルを開く、編集するなど)
  • Macをお使いの方(記事の尺の都合上、Winは省いてます。すみません!)

下準備

Node.jsをインストール

Gulpを使う前にNode.jsが必要になります。
公式サイトからダウンロードからの推奨版のインストールを行なって下さい。

ここはまだターミナルとかじゃなくてクリックでインストールできるのでご安心を(⌒▽⌒)

作業フォルダの作成と移動

ターミナルを開いて下さい。
作業するフォルダをUsers/ユーザ名以下に作成しましょう。
私はokudaというユーザ名なので、okudaの下にworkspaceというフォルダを作成しました。
フォルダの作成はコマンドでもできますが、とりあえず普通に「新規フォルダの作成」で作ってください。
次にそのフォルダへ移動します。
ここでは「cd」というコマンドを使います。Change Directoryの略です。

移動のコマンド

私の場合のコマンド

自分のユーザ名がワカラナイ!という方はターミナルを開いて、
すぐ上に表示されているのがあなたのユーザ名です。

(私はターミナルの表示設定をカスタマイズしているので、皆さんは白いターミナルに黒字のテキストかもしれません。)

package.jsonの作成

自分の作成した作業フォルダに移動したら、以下のコマンドでpackage.jsonを作成します。

ここでのnpm initは初期化の意味です。
本来はいくつか質問が出てきて何回かエンターキーを押す必要があるのですが、
それらすべてをyesで返事するよってことで-yがついてます。

Gulpのインストール

Gulpのインストールはこれだけ。
最後の方に「gulp@4.0.2」みたいなバージョン名が表示されていれば成功です。
下準備はこれで終わり。自動化していくタスクの記述に移りましょう。

4つのタスクを自動化

Scssのコンパイル

Gulpにはいろんなプラグインが用意されていて、それらをインストールしてから処理を記述していきます。
まずコンパイルするためのGulp Sassというプラグインをインストールしましょう。

このときも「gulp-sass@4.0.2」などと表示されればOK。
次に処理を記述するgulpfile.jsを設定します。
エディタで「gulpfile.js」を新規作成して下さい。
もちろん場所は作成したフォルダの中です。
私はworkspaceの直下にgulpfile.jsを作成したので、ファイルパスはworkspace/gulpfile.jsみたいな感じですね。
処理の記述例は以下のとおりです。

今回、変換前・圧縮前のファイルはすべてsrc(ソースの略)フォルダの中に入れていきます。
上記はworkspace/src/scss/common.scss(変換前)をworkspace/pre-autoprefixer/common.css(変換後)にコンパイルする記述です。
なぜcssフォルダではなくpre-autoprefixerという名前のフォルダに出力するかは、あとで説明します。
●をつけた記述ですが、現在はcompactに設定しています。
Scss(Sass)をどんな形式のcssとして出力するかを指定する場所ですね。
compactの出力形式については以下のサイトが参考になりますので、リンクを貼っておきます。

とりあえずここまででコンパイルできるかどうか試してみましょう。
作成したフォルダにターミナルのcdで移動したら、以下のコマンドを叩きます。
(この記事を開いてから一度もターミナルを閉じていなければすでに移動済みかと思います。)

するとStarting watch-scss… と表示されているのが分かります。
これはScssを監視できている証拠なので、scssの中身をエディタで変更してみましょう。
Scssに変更を加えて保存するとcssフォルダに新しくcommon.cssが出来ているのが分かります。
これでコンパイルは完了です。
ちなみにコマンドの処理を止めるにはControlキーとCを同時に押します。

Babel

ES6のモダンな書き方を、ブラウザが読めるようにES5に変換するBabel。
これを使うのはフロントエンドエンジニアくらいかなぁと思いつつ、便利なので一応入れてみます。
今ES6書いてない人も、いずれは書くことになるのでとりあえず入れときましょ(⌒▽⌒)
まずプリセット・Babel・babel-coreをインストールします。
(プラグインの名前を複数書いて同時にインストールすることができます。以下は「@babel/preset-env」「gulp-babel」「@babel/core」の3つを同時にインストールしています。)

そのあと、.babelrcというファイルを作成し、使用するES6のプリセットを記述します。
先頭に「.」がつくファイルはシステムファイルと呼ばれ、普段は表示されていない場合があります。
⌘コマンドキーと「.」キーを同時に押すと、これらのシステムファイルは表示されるようになります。

gulpfile.jsのScssコンパイルの記述の下にトランスパイルする記述を書き足します。

babelもscss同様に、~.es6という名前のファイルが変更されたら勝手に変換されるようにしました。何でも自動化。
処理を書き終わったらScssのコンパイルのときは、

こうターミナルで実行していました。
しかしこの書き方では、4つのタスクを実行しようとした際に、

こんなに書かなくてはいけません。面倒ですよね。
せっかくタスクランナーを使って作業を効率化するんですから、実行するときも楽ちんにしましょう。
「watch-scss」と「watch-babel」の両方を並行して(parallel)実行するdefaultタスクをgulpfile.jsに書きます。

ちなみに、defaultっていう名前のついたタスク(今のところ「watch-scss」と「watch-babel」が入っている)はターミナルのコマンドで実行するときにタスク名を指定せずに済みます。
以下のコマンドだけでOK。早速実行してみましょう。

これだけで今、watch-scssとwatch-babelが動いていると思います。
今回は src/es6/◯◯.es6というファイルを作ります。ES6で書かれたファイルです。
私は試しにsrc/es6/test.es6というファイルを作ってみました。
(src/es6/まではフォルダの位置です。「test.es6」が作成したファイルの名前です。)

letで変数を定義し、アロー関数を用いています。letもアロー関数もES6の書き方です。
もうwatch-babelは実行されているので、test.es6はtest.jsという名前で出力されています。
ファイルパス(ファイルの位置)は/js/test.jsです。

letがvarになり、アロー関数がfunctionになってますね。

Autoprefixer

CSSをクロスブラウザ対応させるにはしばしばベンダープレフィックスを書かなければいけません。
しかし、どのプロパティがベンダープレフィックスを必要としているのか全て把握するのは不可能です。
毎回調べていては時間が掛かるし……。
ということで、すべて自動化してしまいましょう。
自動でベンダープレフィックスを付与してくれるAutoprefixerを導入します。
gulp-postcssとautoprefixerのインストールして、

gulpfile.jsに処理を書いていきます。

Scssのコンパイルをした時、common.scssというファイルをpre-autoprefixerというフォルダの中にcommon.cssファイルとして出力しましたよね。
これはベンダープレフィックスを付与する前の状態のcssを入れるフォルダです。
上の記述では、その付与する前のpre-autoprefixer/common.cssにベンダープレフィックスを付与して、css/common.cssとして出力しています。
src/scss/common.scss

コンパイル(ScssファイルをCSSファイルに変換)

pre-autoprefixer/common.css

ベンダープレフィックス付与

css/common.css
って感じです。
ちなみにAutoprefixerはどんなブラウザに対応するかも設定できます。
最新版のAutoprefixerではgulpfile.jsではなくpackage.jsonに記述することになっています。

上の記述は「IEは11以上に対応して、それ以外は最新から数えて2バージョンに対応する」という意味です。
おおよそこの設定で良いとは思いますが、どうしても細かく対応ブラウザを設定したい!という場合は、
以下のサイトにBrowserslistが載ってますので、参照してください。※全文英語です。

そしてもちろんAutoprefixerもその他のタスクと並列で実行するので、defaultタスクの記述は以下に変わります。

画像の圧縮

最後のタスクですね。いちいちパンダの画像圧縮サイトに行く必要がなくなります。

というか、あのサイトも実はこの圧縮の技術を使っているんです。

では早速必要なプラグインをインストールしていきましょう。
各プラグインの説明は以下の通り。
「gulp-imagemin」:画像を圧縮する
「gulp-changed」:ファイルの変更を検知する(変更・追加されたファイルだけ圧縮するため)
「imagemin-pngquant」:PNGファイルの圧縮率を高める
「imagemin-mozjpeg」:JPEGファイルの圧縮率を高める
「gulp-notify」:エラーが出たらお知らせしてくれる

一気にインストールしちゃいましょう。

gulpfile.jsに追加する記述は以下のとおりです。

 

最後にdefaultタスクにwatch-imageminを足したら完成です。

よくここまでたどり着きました!

復習

あなたは以下のタスクを自動化しました。

  • Scssのコンパイル
  • Babelによるトランスパイル
  • ベンダープレフィックスの付与
  • 画像の圧縮

あなたがこれらのタスクを実行したいときは、作業しているフォルダに以下のコマンドで移動して、

この短いコマンドを打つだけです。

もしほかの作業フォルダでもGulpによる自動化を行いたいなら、
一番手っ取り早いのが関連するフォルダとファイル一式をコピーして貼り付ける方法です。
端末が違う場合はこの方法はできませんが、同一端末内の別フォルダへのコピペならおおよそ問題ありません。
(全ての条件下でこれが有効とは限りませんが、おおよその場合は大丈夫です。)
関連するフォルダとファイルは以下の5つです。

前述しましたが、先頭が「.」で始まる.babelrcファイルは⌘コマンドキーと「.」キーを同時押しすることで表示されます。
あとはsrcフォルダですね。
今回はsrcフォルダの中身をコンパイルしたり、トランスパイルしたりしてます。
なので作業するときはsrc内に作業JSやCSSなどを入れてください。もちろんgulpfile.jsの中身をいじって好きなフォルダに変更することも出来ます。
今回のsrcの中身は以下のとおりです。

設定を変更しなければscssはcommon.scssのみコンパイルする設定にしてます。
これはcommon.scssだけを使うか、common.scssに複数のScssファイルをを呼び出して統合していることを想定しています。
Scssについてはまた次回の記事に書きますね。
それでは快適なGulpライフをお送りください(⌒▽⌒)

WEBサイトなどのご相談はこちらからどうぞ

記事を書いた人

ライター画像
おくだ 清純派新入社員

triBlog更新頻度No.1。フロントエンドのあれこれを発信中! 2020年4月より、インターンから正社員になりました!

ライター画像
おくだ 清純派新入社員

triBlog更新頻度No.1。フロントエンドのあれこれを発信中! 2020年4月より、インターンから正社員になりました!

ページ上部へ