WebDesigner's Memorandumウェブデザイナーの備忘録

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

gulpのインストール

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

必要な前知識

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

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

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

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

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

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

gulpのインストール

インストール前の準備

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

$ cd sample

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

パスのコピー

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

$ npm init

gulp インストール

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の設定を行っていきます。

  1. 行いたいタスクに合ったプラグインのインストール
  2. gulpfile.jsでプラグインを呼び出しタスクの設定
  3. 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」ですが、これは複数の処理を連結させる役割があります。

gulpの実行

さて、設定が出来たのでgulpを実行してみましょう。
まずはコンパイルするのに必要な「scss」フォルダと、その中に「style.scss」を用意します。

あとはターミナルで下記コマンドを実行します。

npx gulp

npxはnpm v5.2から使えるコマンドで、簡単にnpmパッケージの実行が出来るコマンドです(古いnode.jsでは動かないので最新のバージョンにしておきましょう)。

実行してコンパイルが完了したら「css」フォルダと、その中にコンパイルされた「style.css」が生成されているはずです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね