gulp超入門 #Node.js

はじめに

「この記事を見ればgulpの環境構築の手順が分かる！」という記事です。

この記事を執筆した理由は「フロントエンドエンジニア目指しています！」という方と話をする中で、gulpやwebpackを知らない方が思ったより多かったからです。

初めてgulpを触るという方に向けてイチから解説しており、
環境構築の手順から、実際にSassをCSSにコンパイルするところまで行ないます。

現場ではgulpやwebpackといったツールを使うことが当たり前なので、この記事でgulpのことを知り、理解を深めるきっかけになれば幸いです。
参考になったらぜひLGTMをお願いします！！

gulpとは

gulpとはNode.jsで動かすタスクツールです。
一例としては以下のようなひと手間かかる作業を自動化することができます。

Sassのコンパイル
CSSにベンダープレフィックスを自動で付与
CSSやJavaScript、画像の圧縮
ブラウザの自動リロード
ソースマップの作成

gulpを導入するメリット

gulpを導入するメリットは色々とありますが、下記の3点はチーム開発においてとても重要なことです。

煩雑な処理を自動で行うことができるため、作業を効率的に進められる。
自動化により、人的ミスが減ることで作業時間を短縮できる。
複数人での作業環境を統一することができ、一定の品質を保った開発が可能になる。

例えばSassのコンパイルは様々な方法があります。

VSCodeでコンパイル
ターミナルでコンパイル
Dreamweaverでコンパイル

複数人で開発する場合、コンパイル方法が人によってバラバラだとコードに差分が生まれ、品質を一定に保つことができません。
gulpやwebpackを使うことでチーム内でコンパイル方法を統一することができ、品質を一定に保つことが可能になります。

インストールの流れ

下記の手順で、イチから説明していきます。

Node.jsをインストール
npmをインストール
gulpのインストール
gulpfile.jsのインストール
プラグインのインストール
タスクの登録
コンパイルの実行

事前準備

この記事で解説しているディレクトリ構成図です。
gulp_lessonフォルダ、srcフォルダ、sassフォルダ、app.scssファイルは事前に作成します。
（gulp_lessonのフォルダ名はお好きなように変えてください）

ディレクトリ構成図

gulp_lesson
 ├ dist
 ├ node_modules
 ├ src 
 │  └ sass
 │     └ app.scss
 ├ package.json
 └ gulpfile.js

この記事執筆時点で使用した各パッケージのバージョンです。

パッケージ	バージョン
Node.js	12.14.1
npm	6.13.4
gulp	4.0.2
gulp-sass	4.1.0

Node.jsをインストール

まずはNode.jsがインストールがインストールされているか確認します。

ターミナル

$ node -v

ターミナルでこちらのコマンドを叩いてNode.jsのバージョンが表示されていればインストールされています。
インストールされていない場合はNode.jsの公式サイトからインストールします。

Node.js公式サイト

LTS版と最新版がありますが、LTS版をインストールすることをおすすめします。

インストール後に先ほどのコマンドを叩いてバージョンが表示されればインストールは完了です！

npmをインストール

npmとは「node package manager」の略で、Node.jsのパッケージを管理するためのシステムのことです。
gulpで使うプラグインと考えていただいたら良いでしょう。

npm公式サイト

まずはnpmをインストールします。

ターミナル

$ npm init

以下の内容を入力する必要がありますので適宜変更してください。
（特に指定がなければEnterで進んでください）

package name
version
description
entry point
test command
git repository
keywords
author
license

入力が終わり、package.jsonが作成されていればnpmのインストールは一旦完了です。

gulpのインストール

次にgulpをインストールします。
今回はグローバルでインストールを行います。

ターミナル

$ npm install gulp -g

グローバルとローカルの違いは下記の通りです。

グローバルインストールはそのPC上のどこからでも利用可能
ローカルインストールはそのプロジェクトのフォルダ内でのみ適用

gulpfile.jsの作成

次にgulpfile.jsを作成します。

先ほど作成したpackage.jsonと同じディレクトリにgulpfile.jsというファイルを作成し、
gulpfile.jsを開き、下記のコードを追加します。

gulpfile.js

var gulp = require("gulp");

gulpでSassをコンパイル

コンパイルとは、プログラムのソースコードをコンピューターが実行可能な機械語に翻訳することです。
gulpでSassをコンパイルしてCSSに変換し、機械が解読できるようにしてみましょう。
今回はScss記法で行います。

まずsassフォルダを作成し、app.scssを作成しましょう。

Sassファイルの中身はこんな感じで。

app.scss

.hoge {
    font-size: 24px;

    &__hoge {
        color: #3399cc;
    }
}

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

Sassをコンパイルするために必要なgulp-sassというプラグインをインストールします。

npm公式サイト / gulp-sass

ターミナル

$ npm i gulp-sass --save-dev

こちらを実行するとpackage.jsonにgulp-sassがインストールされていることが確認できます。

package.json

"devDependencies": {
    "gulp-sass": "^4.1.0"
  }

タスクの登録

プラグインのインストールが終わったら、gulpfile.jsにタスクの登録をします。

gulpfile.js

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

gulp.task("sass", function () {
    return gulp
        .src("./src/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("./dist/css"));
});

タスクの書き方は先ほど紹介したnpm公式サイトに記載されています。

npm公式サイト / gulp-sass

タスクの書き方について少し解説しておきます。

require('プラグイン名') → 使用するプラグインを読み込みます
gulp.task('タスク名', 実行される処理) → タスク名と、実際に行う処理を記述します。
gulp.src('取得するファイル') → タスクの対象となるファイルを取得します。
pipe() → 1つ1つの処理をつなげます。前述のコードでは、src()で取得したSassファイルをコンパイルし、それをgulp.dest()で書き出しています。pipe()メソッドは繋げることができるので、連続した複数の処理を行うことができます。
gulp.dest('保存先フォルダー') → 処理を行ったファイルを指定の場所に保存します

コンパイルの実行

いよいよコンパイルを行います。
先ほど登録したタスクの"sass"という箇所がタスクの名前です。
ターミナルにコマンドを叩いて実行します。

ターミナル

$ gulp sass

先ほどのSassファイルがコンパイルされてCSSファイルになっているはずです。

app.css

.hoge {
  font-size: 24px; }
  .hoge__hoge {
    color: #3399cc; }

インデントがズレていたりしますが、オプションを追加すれば変更することもできます。
何度も紹介しているnpm公式サイトに「Options」という箇所があるのでお好みでどうぞ。

npm公式サイト / gulp-sass

gulp4では関数宣言とexportsが推奨に

本記事執筆時点では、task()メソッドによるタスク定義は公式が非推奨とされています。
（一応使えるのですが...）

[参考] task( ) / gulp.js

推奨されているのがタスクごとに関数をつくる方法です。
前述のコードを書き換えたものがこちら。

gulpfile.js

function SassCompile() {
    return gulp
        .src("./src/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("./dist/css"));
}
exports.default = SassCompile;

タスクを実行します。

ターミナル

$ npx gulp

書き出されたCSSのコード自体は一緒です。

便利なプラグイン（余談）

gulpを始めたばかりの方向けに便利なプラグインを紹介します。
（こちらの記事では詳細は解説しません。ご容赦ください）

gulp-sass
gulp-autoprefixer
gulp-groupcss-mediaqueries
gulp-rename
gulp-sourcemaps
browser-sync
gulp-imagemin
imagemin-mozjpeg
imagemin-pngquant

最後に

最後までご覧いただきありがとうございます。

gulpはwebpackに比べると学習コストが低く、導入しやすいと思いますのでぜひ導入してみてください。

【続編】
gulpでSassを良い感じにコンパイルする