様々な作業を自動化するgulpの基礎と導入方法

2019年1月18日

今回は様々な作業を自動化するビルドシステム「gulp(ガルプ)」の基礎と導入方法について書いていきます。

必要な前知識

gulpはNode.jsをベースにしたビルドシステムヘルパー（様々な作業を自動化してくれるツール）です。
「様々な作業って具体的に何してくれるの？」という事ですが、以下のような面倒な事をコマンド1つで出来るようになります。

Sassのコンパイル
ファイルの圧縮
ベンダープリフィックスの自働付与
画像の圧縮

必要な知識や、インストールしておくべきものは以下の通りですが、一応初心者の方でも勉強しながら進めていけるように丁寧に書いていくつもりではあります。

知識
- 最低限のコマンドライン（ターミナル）の操作
- 最低限のJavaScriptの知識
インストールしておくべきもの
- Node.js

インストールにはNode.jsが必要になりますので、まだインストールしていない方は過去に記事にしてまとめているので、そちらを参考にしてインストールを行ってください。

Webrandum

mac環境にnodebrew経由でNode.jsをインストールしてバージョンを管理する方法

https://webrandum.net/nodebrew-install

フロントエンドの開発を行うにあたって、避けては通れないのがNode.jsのインストールです。今回はNode.jsのインストール方法をひと通りまとめてみます。Node.jsとは何なのか？JavaScriptは本来クライアントサイド（ブラウザ側）で処理を行う言語なのですが、それをサーバーサイドでの制御も出来るようにしたのが「Node.js」です。Node.jsを利用することでWebサービスの開発環境が作れるようになります。開発環境を作るには、Node.jsをインストールする際に一緒にインストールされる「npm」というパッケージ管理ツールを利用します。npm...

また、執筆時点（2019年1月現在）でのgulpのバージョンは4.0.0なので、その前提で進めていきます。

gulpのインストール

インストール前の準備

まずはgulpをインストールしたいディレクトリに移動します。sampleの部分にはディレクトリのパスが入ります。

$ cd sample

余談ですが、パスのコピーはFinderで目的のフォルダを右クリック→Optionを押しながら「名前を変更」をクリックするとパス名をコピーできます。

次に下記のコマンドを入力します。名前やバージョン等色々質問されますが、何も入力せずEnterを押していきます。

$ npm init

gulpはNode.jsに付属されているnpmというパッケージマネージャーを使用してインストールするのですが、これはそのnpm設定ファイルを作成するためのコマンドです。
すべて答え終えると、ディレクトリに「package.json」というファイルが作成されていると思います。ちなみに今の質問をすべてスキップしてとりあえずpackage.jsonを作成するnpm init -yというコマンドもあります。

今後は特に自分で記述しない場合はこちらを使うようにしましょう。

gulpのインストール

package.jsonが作成できたら、いよいよgulpのインストールです。
下記のコマンドを入力してgulpをインストールします。「–save-dev」というオプションが付いていますが、これはpackage.jsonのdevDependenciesに追加するための記述です。

$ npm install gulp --save-dev

コマンドを打つと「node_module」というフォルダと「package-lock.json」というファイルが作成され、中に大量のフォルダが格納されているかと思います。また、package.jsonを見てみると、devDependenciesの中にgulpが記述されています。

現在sampleフォルダには「node_modules」「package-lock.json」「package.json」が入っている状態ですね。

これでgulpのインストールは完了です。

gulpのタスク作成

gulpfile.jsの作成

さて、gulpのインストールは完了しましたが、これだけでは動きません。
次にgulpの設定をしてあげる必要があります。

gulpの設定は全て「gulpfile.js」というファイルに記述していきますので、package.jsonと同じ階層にgulpfile.jsを作成します。

そしてここから先は下記の手順でgulpの設定を行っていきます。

行いたいタスクに合ったプラグインのインストール
gulpfile.jsでプラグインを呼び出しタスクの設定
gulp（タスク）の実行

今回は「Sassをコンパイルする」というタスクを設定してみましょう。

プラグインのインストール

Sassをコンパイルするには「gulp-sass」というプラグインが使えますので、下記コマンドでインストールしましょう。

$ npm install gulp-sass --save-dev

gulpfile.jsでタスクの設定

プラグインのインストールが出来たら、gulpfile.jsにプラグインを呼び出し、タスクの設定を行います。

gulpfile.jsconst gulp = require("gulp");
const sass = require("gulp-sass");

gulp.task("default",function(){
  gulp.src("scss/*.scss")
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(gulp.dest("./css"))
})

コードの解説を行うと、それぞれ下記のようになります。

const 定数名 = require(“プラグイン名”);でgulpやプラグインの呼び出して定数に代入しています。
gulp.task(“タスク名”,function(){タスクの内容})でタスクの登録が可能です。

ちなみにタスク名を「default」にしておくと、デフォルトのタスクとして登録され、タスク名を指定しなくてもgulpの実行してくれるようになります。

gulp.src(“呼び出すファイルパス”)で呼び出すファイルを設定します。今回はscssフォルダに入っている.scssファイルをコンパイルします。

後は見慣れない「.pipe」ですが、これは複数の処理を連結させる役割があります。