macOS Sierra に Gulp をインストール

  macOS Sierra

macOS Sierra に Gulp をインストールしてみます。

 

Gulp とは

Gulp(ガルプ)は Node.js をベースとしたビルドシステムヘルパーです。

http://gulpjs.com

主に、Web制作の面倒な作業を自動化してくれるタスク自動化ツール(タスクランナー)です。
SassなどのCSSメタ言語のコンパイル、HTML/CSS/JavaScriptの圧縮や結合など、目的にあったパッケージをインストールして、設定ファイル( gulpfile.js )にやりたいことを書いておけば、あとはgulpを実行するだけでそれらを処理することができます。

 

Gulp のインストール

Gulpをインストールします。

Gulp は Node.js を使ってインストールします。
Node.js のインストールはこちら「macOS Sierra に Node.js をインストール

 

Getting Started

 

Gulp のインストールには「グローバルインストール」と「ローカルインストール」があります。
デフォルトはローカルインストールされるようになっていて、グローバルインストールしたい場合は -global または  -g オプションを付けて実行します。

 

グローバルインストール

グローバルインストールはそのマシン上のどこからでも利用できるようになります。

 

 

Gulp をインストールします

グローバルインストールは1度インストールしたら、次からはインストールする必要ありませんが、ローカルインストールは新しいプロジェクトのたびにインストールする必要があります。

 

まず、グローバルインストールします。
ターミナルを起動して、npm install --global gulp-cli と入力して実行 return します。

$ npm install --global gulp-cli

インストールが開始します。

/Users/USER-NAME/.nodebrew/node/v7.7.4/bin/gulp -> /Users/USER-NAME/.nodebrew/node/v7.7.4/lib/node_modules/gulp-cli/bin/gulp.js
/Users/USER-NAME/.nodebrew/node/v7.7.4/lib
└─┬ gulp-cli@1.2.2 
 ├── archy@1.0.0 

 〜 省略 〜

 └── y18n@3.2.1

 

ローカルインストール

グローバルインストールが終了したら、ローカルインストールする準備をします。
(ローカルインストールはインストールしたプロジェクトのフォルダ内でのみ利用できます。)

 

Gulp をローカルインストールする前に node.js モジュールを管理する package.jsonを作成します。

プロジェクトのフォルダに移動します。
プロジェクトフォルダが無い場合は任意の場所にフォルダを作成します。

ターミナルから cd ~/{ プロジェクトフォルダ } でプロジェクトフォルダに移動します。

$ cd ~/{ プロジェクトフォルダ }

 

次に Node.js の設定ファイル package.json を作成します。
ターミナルから npm init と入力して実行 return します。

$ npm init

実行すると対話式で、package.json の作成が開始されます。
未入力のまま return (Enter) を押してスキップしてもかまいません。

Ctrl + C で途中終了できます。

最後に yes と入力してreturn (Enter) を押して完了です。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (project-folder) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/USER-NAME/project-folder/package.json:

{
 "name": "",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}


Is this ok? (yes) yes

完了すると、package.json ファイルが作成されます。

 

次に gulp をローカルインストールします。

同じディレクトリで ターミナルから npm install gulp --save-dev と入力して実行 return します。
このコマンドは npm i -D gulp と省略することができます。

$ npm install gulp --save-dev
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
/Users/USER-NAME/project-folder
└─┬ gulp@3.9.1 
〜 省略 〜
 └── clone@0.2.0

WARN がいくつかありますが、今回はこのまま進めます。

WARN 表示されているパッケージをアップデートすれば解消されるかもしれません。【未確認】
npm install { パッケージ名 }

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

最後にターミナルから gulp -v コマンドを実行して Gulp がインストールされたかを確認します。

$ gulp -v
[19:59:14] CLI version 1.2.2
[19:59:14] Local version 3.9.1

CLIとLocal バージョンが表示されれば完了です。

 

gulpfile.js の作成

gulpfile.js に記述したタスク処理が実行されます。
package.json と同階層に gulpfile.js ファイルを作成して“Hello World” を表示してみます。

gulpfile.jsに下記を記述して保存します。

var gulp = require('gulp');

gulp.task( 'default', function() {
 console.log( "Hello World!" );
});

 

gulpfile.js を作成したら package.json に

"scripts": { "gulp": "gulp" }

を追加します。

 

{
 "name": "",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
},
 "scripts": {
 "gulp": "gulp"
}

 

gulpコマンド実行します。
ターミナルから npm run gulpと入力して実行 return します。

$ npm run gulp

> @ gulp /Users/USER-NAME/project-folder
> gulp

[20:17:32] Using gulpfile ~/project-folder/gulpfile.js
[20:17:32] Starting 'default'...
Hello World!
[20:17:32] Finished 'default' after 103 μs

 

Hello World! が表示されれば完了です。

 

  macOS Sierra     by