夢は小さいほどいいと思っているんです。本気になれるから。

夢を持つことが大事なんじゃなく、本気になるのが大事。(糸井重里)

gulp初心者がなんとなく使えるようになるためのまとめ_1

f:id:pbrsk:20170307222121j:plain

ある案件で、PHPなどのサーバーサイド言語を使わずに、ヘッダー・フッターなどの共通化ができるツールでコーディングできないか?ということで、教えてもらって使い始めたGulp。
そのお仕事もひと段落したので、なんとなく使ってわかってる気にならず、ここで改めて基礎からしっかり理解して、別の案件でも応用できるようになるために、まとめておきます。

この記事の執筆時点のgulpのバージョンは3.9.1です。

gulpとは

さまざまなファイルの処理作業を自動化してくれるツールです。
Node.jsのStreamAPIを利用してるところが特徴で、そこがGruntとの違いを作ってるみたい。

ファイルの処理をストリームで行う?

Gulpは「.pipe」という、jQueryでいう「メソッドチェーン」を使ってタスクを続けて書くため、見通しがよく記述できます。
Gruntは、JSON形式で書けますが、タスクの量が増えていくとネスト地獄に陥りやすいそうです。

Gulpによる自動化のメリット

  • 効率化
  • 共同開発においてムラが出にくい

sassのコンパイラーであるcompassのwatch機能を利用して変更を監視することもできますが、コンパイル後にブラウザの自動更新もしたいと思った場合、これらの作業もgulpのタスクにし、自動化することで作業を効率的できます。また、CSSやJSのコンパイルや画像の圧縮といった作業のほかにも、プロジェクトごとに合わせた作業を自動化してしまえば人的ミスも防げて成果物を均質化しやすくなります。

環境構築とgulpのインストール

まず、Node.jsをインストールする。

npmによるインストール

Node.jsではnpmによってパッケージのインストールを行います。gulp自体のインストールもですが、gulpで利用するプラグインもnpmコマンドでインストールします。
では、パッケージを管理のための準備をコマンドの例を交えて説明します。これをする事により、同じ環境をすぐに別の案件(プロジェクト)でも構築できるようになります。

まずは任意のところにディレクトリを作成し、ターミナルで作成したディレクトリへ移動します。そして、npmでパッケージをインストールする際には、次のコマンドを実行します。

$ npm install パッケージ名

実行するとnode_modulesフォルダが作られ、そこにパッケージがインストールされます。

ローカルインストールとグローバルインストール

npmではパッケージをローカルとグローバルのどちらにインストールするか、選ぶことができます。ローカルにインストールしたパッケージは、そのプロジェクトのフォルダ内でのみ利用できます。グローバルにインストールした場合は、そのマシン上のどこからでも利用できるようになります。デフォルトでは、ローカルにパッケージがインストールされるようになっています。グローバルにインストールしたい場合には-gオプションを付け、次のように実行します。

$ npm install -g パッケージ名

例えば、gulpなどは、どこからでも使えるとありがたいと思うので、グローバルインストールしたほうがいいかも。
グローバルにインストールされたgulpは、ローカルにインストールしたgulpを実行するのが役割なので。

$ npm install gulp -g

Macユーザの場合はroot権限での実行を求められるのでsudo npm〜としてください。

プロジェクトごとに利用するパッケージの管理

npmにはインストールしたパッケージを管理する機能も用意されています。パッケージを管理するためにはまずpackage.jsonというファイルを作成する必要があります。
作り方は、例えば前の案件で使用したpackage.jsonファイルを、新たな案件で使用するディレクトリ内に直接コピペする方法でも使用可能です。
また、npm initというコマンドを実行すると、対話形式でプロジェクトの名前や、作成者などの情報を決めた上でpackage.jsonを書き出してくれます。
package.jsonJSONファイルとして解釈できる必要があるので、最低限{}が書かれている必要があります。

installコマンドのオプション

package.jsonでインストールするパッケージの管理をするにはnpm installを実行する際に「--save」または「--save-dev」というオプションを付けます。
「--save」は作成しているプログラム自体にそのパッケージが必要なときに付けます。
gulpやgulpで使うプラグインなど、開発時だけ必要となるものには「--save-dev」を付けるとよいでしょう。

「--save-dev」とつけることで、このパッケージを開発用パッケージとしてインストールすることができます。そして、package.jsonを見るとdevDependecesに記載されています。
package.jsonに記載されたパッケージは次回以降、npm installというコマンドを実行するだけでインストールすることができます。
package.jsonがあれば、いつでも必要なパッケージがすぐにインストールできます。

Gulpで開発をするなら、まずは、これがなくちゃ的なパッケージをすぐ用意してくれる、秘伝のpackage.jsonファイルだけコピペして
そのあと、npm installするといいと思います。

おまけ:npmコマンドにはショートカットがある

npmではinstallや「--save-dev」などを短く表記するためのショートカットが用意されています。
installはiと一文字で表記することができてnpm iと短縮できます。
「--save-dev」は-D、
「--save」は-Sと短縮できます。
合わせると以下のように短縮できて手間をかなり減らすことができます。

$ npm i -D パッケージ名
ていうか、まずnpmとは?

npmはnode.jsのpackageを管理するためのツールです。macOS でいうところのHomebrewみたいなやつです。
node.js自体はJavaScriptで作られたWebサーバーですが、タスクランナー的なツールもたくさんあります。

gulpのインストール

するために

package.jsonを作成する
  • npm init で質疑応答する感じで、package.jsonを作成する方法
  • 他の案件からのコピペ

がある。今回は、勉強のため、任意をディレクトリ内にnpm initしてpackage.jsonを作成した

できたpackage.jsonの中身が下記

{
  "name": "gulptest_for_study",
  "version": "1.0.0",
  "description": "studying_for_gulp",
  "main": "index.js",
  "scripts": {
    "test": "gulp"
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "keywords": [
    "gulp",
    "pug"
  ],
  "author": "ryosuke_shimizu",
  "license": "MIT"
}
npmでgulpをインストールする

グローバルにgulpをインストールします。

$ npm install -g gulp

そして、

$ npm install --save-dev gulp

を実行すると、node_modulesファイルと、package.jsonのdevDependenciesの中に、
"gulp": "^3.9.1"という記述が追加されます。

package.json

{
  "name": "gulptest_for_study",
  "version": "1.0.0",
  "description": "studying_for_gulp",
  "main": "index.js",
  "scripts": {
    "test": "gulp"
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "keywords": [
    "gulp",
    "pug"
  ],
  "author": "ryosuke_shimizu",
  "license": "MIT"
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

コマンド実行後、インストールが正しく完了していることを確認するために、次のコマンドを実行します。

shimizuryousuke-no-MacBook-Pro:gulp_test r.shimizu$ gulp -v
[18:32:50] CLI version 3.9.1
[18:32:50] Local version 3.9.1

コマンド実行後に上記のような結果がコンソールに表示されればインストール完了です。[ ]内は実行時の時間を表しています。

gulpのバージョン管理

glupのバージョンを固定せずにnpm installした際には、インストールするパッケージの最新のバージョンがインストールされます。これによってローカルとグローバルのgulpのバージョンに相違が出てしまうかもしれません。なので、グローバルにインストールしたパッケージは適宜アップデートする必要があります。

もしローカルとグローバルのバージョンの管理が面倒だと思う方は、npm runなどを使ってローカルにあるgulpを実行するように設定しておくとよいでしょう。

タスクを実行してみる

gulpのタスクはgulpfile.jsというファイルに書きます。

var gulp = require('gulp');

gulp.task('hello1',function() {
  console.log('hello gulp ryo!');
});

gulp.task('default',['hello1']);

gulp.taskに渡している第一引数hello1がタスク名です。helloはコマンドライン上に「hello gulp ryo!」と表示するだけのタスクです。
defaultタスクは、gulpコマンドを実行する際に、タスク名を指定しなかったときに実行される開発に使うタスクです。(実行タスク)
gulp.task('default', ['hello1']);とした場合、`hello1`タスクが実行されます。
上記コードの保存後、コマンドラインからgulpコマンドを実行して、次のような結果が得られれば成功です。

shimizuryousuke-no-MacBook-Pro:gulp_test r.shimizu$ gulp
[20:49:42] Using gulpfile ~/Dropbox/develop/gulp_test/gulpfile.js
[20:49:42] Starting 'hello1'...
hello gulp ryo!
[20:49:42] Finished 'hello1' after 109 μs
[20:49:42] Starting 'default'...
[20:49:42] Finished 'default' after 13 μs