gulp初心者がなんとなく使えるようになるためのまとめ_1
ある案件で、PHPなどのサーバーサイド言語を使わずに、ヘッダー・フッターなどの共通化ができるツールでコーディングできないか?ということで、教えてもらって使い始めたGulp。
そのお仕事もひと段落したので、なんとなく使ってわかってる気にならず、ここで改めて基礎からしっかり理解して、別の案件でも応用できるようになるために、まとめておきます。
この記事の執筆時点のgulpのバージョンは3.9.1です。
gulpとは
さまざまなファイルの処理作業を自動化してくれるツールです。
Node.jsのStreamAPIを利用してるところが特徴で、そこがGruntとの違いを作ってるみたい。
環境構築と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.jsonはJSONファイルとして解釈できる必要があるので、最低限{}が書かれている必要があります。
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のタスクは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