gulpの使い方 Win/Mac対応

• 作成：2015/06/22
• 更新：2018/05/27
• Mac > Web制作

Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。

node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

Node.jsとは

Node.jsをインストールする

• Mac版バージョン管理ツール：nodebrew
• Windows版バージョン管理ツール：nodist

パッケージマネージャー

• npmの使い方
• gulp（ガルプ）のインストールと使い方

Node.jsとは

ご存知な方は多いと思いますが、この辺りから自分用におさらいしたいと思います。

Node.js は一言で言うと「サーバで動くJavaScript」です。つまりJavaScriptを勉強すれば、クライアント側とサーバー側どちらの開発も出来る！というになります。

またNode.jsに依存しているgulp（画像最適化/ファイル圧縮/ベンダープレフィックス/CSSスプライト等の効率化）などのフレームワークが沢山あるので、デザイナーさんやフロントにおいてもNode.jsの環境を整えるのがトレンドとなっています。

サーバにおいては「膨大な同時アクセスに強い」というメリットもあります。こんな具合で近年のjs人気に加え、サイトやアプリ構築やサーバサイドもいじれたり、なんでも出来てしまいます。

Node.jsはノンブロッキングI/Oを採用していて、沢山のリクエストを捌けるようになっています。このように「待たせない処理」に加え、一つのスレッドで実行するシングルスレッドを使っているので、Apacheのようにスレッドが増えないのでメモリ消費も少なく、サーバのパンク等の問題もクリアできてしまいます。

※ スレッドとは：プログラムは上から順に実行されます。そしてこの一連の流れをスレッドと言い、１本の線で表せるような1系列の処理をシングルスレッドといいます。

ノンブロッキングIO

文字通りブロック（他の処理を待つ）しない、データ受信の完了を待たず他の処理を実行できます。I/OはInput・Outputです。一つのスレッドで複数のリクエストを処理できる。急なアクセスに強いという特徴があります。イメージとしてはこちらが理解しやすいです。

• [参考] コンビニでわかるノンブロッキングIO | break the code!! | codebreak;

Node.jsをインストールする

それでは早速インストールしてみたいと思いますが、Node.js本体をインストールする前に入れておきたいツールがあります。

バージョン管理ツール

Node.js は更新やバージョンの統一や切り替えが必要な場合があるので、WindowsとMac両方のバージョン管理ツールのインストール方法を記載します。とりあえず、以下の２つを抑えておけばよいです。

• Mac：nodebrew
• Win：nodist

これらのツールはNode.jsをインストールする前に入れるか、既に入っている人はアンインストールします。つまり手順としては、バージョン管理ツールインストール＞Node.jsインストールという流れになりますね。

Mac版バージョン管理ツール：nodebrew

Mac OSを使う場合、nodebrew というバージョン管理ツールを入れます。

nodebrew

nodebrewはPC（ローカル）でバージョン管理（バージョンごとに使い分けたり、任意のNode.jsをインストールしたり）するためのツールです。

• [ダウンロード] hokaccha/nodebrew · GitHub

Node.jsがインストールされてある場合は先にアンインストールする必要があります。以下のコマンドでnode.js がインストールされているか確認できます。

$ node

nodebrewをコマンドからインストール

node.jsがインストールされてなければ以下からnodebrewをインストールします。コマンドを使って公式通りにこちらを入力

$ curl -L git.io/nodebrew | perl - setup

※「curl」というのはファイルのダウンロード・アップロードを行うコマンドで、オプションの「L」はリダイレクトに対応するという意味です。git.io はGitHub内の短縮URLです。意味を知っておくと何となく忘れないかなと思います。

PATHを通すって何？

次にパスを通す必要がありますが「PATHを通す」ってどういう意味なんでしょう？

パス(PATH)の確認と設定方法は？ - Pocketstudio.jp Linux Wikiによると「コマンドを簡単にするための設定」で、nodebrew等のコマンドを使うために、そのコマンドが格納してある場所をOSに教えるということ。

UNIXにはコマンドから共通して参照できる変数があります。これを「環境変数」といいます。コマンド名で色々動かせるのはパスが通っているおかげなのです。

パスを通すためにはファイルを探させるために、PATH変数にディレクトリのパスを指定する必要があります。UNIX（Mac）の場合パスはコロン「:」で区切ります。Winの場合はセミコロン「;」です。下記コマンドの最初にある「export PATH」は「環境変数を設定する（出力する）」という意味。

話をnodebrewに戻します。以下のコマンドを入力してください。

nodebrewのパスを通すコマンド

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

続いて設定を読み直すコマンド

$ source ~/.bashrc

※ 「source」はスクリプトファイルを実行するというコマンド。ファイルに記載されたコマンドを実行します。変更を有効にしたいときに使うので、sourceコマンドを使うと変更をすぐさま反映させることができます。

次に「.bashrc」という難しそうな名前が出てきました。

bashはユーザーの操作結果を表示するソフトウェアでコマンド名。そのbashの起動時に毎回読み込まれるファイルが「.bashrc」です。このファイルにコマンドを追記した場合、ログインやシェル起動時など、記述したコマンドが自動的に実行されます。

もう一つ「.bash_profile」というファイルもありますが、こちらはログイン時に読み込まれます。

nodebrewに関してはこちらを参考にさせていただきました。

• [参考] node.js 入れるなら nodebrew が超簡単 - tacamy.blog
• [参考] パス(PATH)の確認と設定方法は？ - Pocketstudio.jp Linux Wiki

以下のコマンドを入力してヘルプ情報が表示されればインストールされています。

nodebrew help

nodebrewのバージョンを確認して

nodebrew ls

確認したバージョンが「v0.10.29」の場合、以下のようにバージョンのコマンドを入れます。

use v0.10.29

再度にnode.jsのバージョンを確認してバージョンが確認されていればOK。

node -v
v0.10.29

再起動後エラーが出たら

しかし、ターミナルを再起動した後に「bash: nodebrew: command not found」と出てくる場合は読み込まれてないので、こちらのMac Terminalでbash alias - 既視感ある日々を参考に「.bash_profile」というファイルを作成し、以下のスクリプトを記載します。

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

Windows版バージョン管理ツール：nodist

nodistはWindowsにてNode.jsのバージョン管理をするツールです。これを使うにはzipかGitが必要ですが、Node.jsがインストールされているのであれば一度アンインストールを行ってください。

git についてはこちら

• [参考] これからGit を始めてみようという人のための使い方と入門フロー
• [ダウンロード版] marcelklehr/nodist · GitHub

任意のディレクトリで右クリック「Git Bash Here」でコマンドプロンプトを開き以下を入力します。

git clone git://github.com/marcelklehr/nodist.git

パスを通す

コントロール パネル→システムとセキュリティ→システムからシステムの詳細設定→環境変数を開ます。

「Path」にnodist/bin があるパスを追記します（セミコロン;の後にnodist.cmdがあるディレクトリを追記）。

パスの場所を確認したら

次に新規を押して、変数名に「NODIST_PREFIX」と入力、変数値は\nodistまでを入力します。

アップデート

今度は通常のコマンドプロンプトを開きバージョンが表示されればOK。

nodist -v

※　2017/03/17追記

失敗する場合は、Releases · marcelklehr/nodistからインストーラーからダウンロードして展開しましょう。ちなみにインストーラーから展開すると環境変数にはNODE_PATH、NODIST_PREFIX、NODIST_X64が追加されているようです。

NODE_PATH
nodistが置いてあるディレクトリ\Nodist\bin\node_modules;%NODE_PATH%

以下を入力しアップデートします。

nodist update

結構時間がかかり不安になりますが、バージョン表示が出来れば完了です。

node -v

• [参考] node.js インストール備忘録（windows7） - Qiita

パッケージマネージャー

パッケージマネージャーはライブラリを管理しやすくするツールです。インストールや削除、バージョンの更新などをコマンド操作で行えるので楽になります。毎回公式サイトやブックマークを探してディレクトリに置いて更新して・・・などが必要なくなるので便利です。

• npm / Node.js のソフトウェア、タスクランナー（Grunt/gulp）などの管理。
• Bower / JSやCSSを管理

npmの使い方

Node.jsをインストールすると「npm」がついてきます。npmとはNode.jsのモジュールを管理するツールで、短いコマンド入力で簡単にパッケージをインストールすることができます。

Node.jsではパッケージを管理するのにnpmを使い、バージョン管理にpackage.jsonという環境設定ファイルを使います。

package.jsonを作る

package.jsonとはプロジェクトに対応する名・概要・作者・ライセンス・スクリプトなどが書かれてある設定ファイルのことです。このファイルがあると「npm install」を入力するだけでpackage.jsonに記録された環境を全て、一発でインストールできるので他の人に渡す際も便利です。

早速作成してみましょう。ディレクトリを作成して移動します。

mkdir sample-project
cd sample-project

初期化します。

npm init

コマンドの中で色々質問が出てきますが、全てエンターを押してOK。

すべて終わるとディレクトリの中に「package.json」が作られます。

package.jsonの記述方法はnpm package.json 日本語版 取扱説明書が参考になります。

npmはローカルインストールとグローバルインストールがあります。ローカルはプロジェクト内、グローバル（g）は全体で共有したいライブラリ。

npm installというコマンドを使えばパッケージ名を指定するだけでインストールできます。オプション「-g」をつけるとグローバルインストールになり、どこからでもコマンドを呼び出せるようになります。jqueryをカレントディレクトリに取得する場合は以下。

$npm i --save jquery

インストール先はこのようになります。

• 何も付けない：現在作業を行っている場所。./node_modules
• gをつける：/usr/local

インストール済のパッケージを確認する場合は

$npm list

gulp（ガルプ）のインストールと使い方

いつ頃だったか、jsの処理を簡潔・安全に実装したいという流れから、CoffeeScriptやTypeScriptというシンタックスシュガー（人間にとって分かりやすい短い構文）が登場しました。

jsのシンタックスシュガーであるCoffeeScriptやTypeScriptなどをJavaScriptに自動で変換してくれるGruntやgulpというビルドツールが産まれました。

gulpとはSass・画像やJS圧縮・テスト実行などの処理を簡単なコマンドで自動化する、フロントエンドの仕事を効率的にするツールです。フロントエンドはビルドや圧縮作業など面倒なことが沢山あるので、これらの作業を自動で行えて他人と環境を共有できるというのは非常に効率的です。

またgulpはGruntと比べて分かりやすく高速、コード量も少なくJavaScriptで書けるというメリットがあるので人気です。今後はこちらが主流になりそうなのでgulpだけピックアップします。

gulpをインストール

gulpを使うにはNode.jsと先ほど説明したnpmを使います。

ローカル作成の前に、どこからでも利用できるように、オプションの「g」をつけてグローバルにインストールします。

npm i -g gulp

※ 「g」は「--global」のショートハンドです。

次にgulpを使うディレクトリ作成後（mkdir / npm init）、ローカルにインストールします

npm i -D gulp

※「i」はインストール、「D」は「--save-dev」のショートハンドです。

save-devはpackage.jsonにgulpの情報を記載してくれます。

バージョンを確認します。

gulp -v

以下のように表示が出れば無事にインストールされています。

[00:00:00] CLI version 3.9.0
[00:00:00] Local version 3.9.0

ディレクトリを見るとnode_modulesの中にgulpというディレクトリができてます。

プラグインをインストールする

次はcssを整形する「CSS Beautify」をインストールしてみます。css/style.css を作成したら以下のコマンドを入力

npm i -D gulp-cssbeautify

「gulp-cssbeautify」のディレクトリが作成されました。

gulpfile.jsを作る

次にgulpfile.jsを作成します。gulpfile.jsはgulpコマンドを叩いたときに、読み込まれるファイルです。

touch gulpfile.js

※ windowsでgulpfile.jsを作る場合は

copy con gulpfile.js

の後に「CTRL+Z」を押しEnterでファイル作成します。

gulpfile.jsの中には公式にあるように以下を入力します。ソースの中にある「task」はタスクの登録、「src」は読み込むファイル、「dest」は出力先、「pipe」で繋げていきます。

var gulp = require('gulp'),
    cssbeautify = require('gulp-cssbeautify');
 
gulp.task('cssbeautify', function() {
    return gulp.src('css/style.css')
        .pipe(cssbeautify())
        .pipe(gulp.dest('css'));;
});

※ファイルの中を記述・追加する場合、コマンドの「vi gulpfile.js」で編集すると楽です。（i でインサートモードにして上のコードを貼り付けてescでコマンドに戻り、:wqで保存終了。保存せずに強制終了したいときはq!です）

そして以下のコマンドを叩くと

gulp cssbeautify

style.cssが整形されています。

デフォルトで実行させるには最後の行に以下を追記します。xxxxの中はタスク名を入れます。

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

タスクをデフォルトで複数指定する場合は以下のように配列を使います。

gulp.task('default', ['task1', 'task2']);

指定ファイルを複数指定する場合も配列でくくります。

gulp.src(['css/style.css', css/sample.css'])

gulp プラグイン（おすすめ）

便利そうなおすすめというか定番のプラグインを少しピックアップしました。

CSS

• gulp-autoprefixer：ベンダープレフィックスを自動でつける
• gulp-csscomb：CSSプロパティを並べ替える
• gulp-minify-css：minify
• gulp-sass：Sassコンパイル
• gulp-rename：拡張子をxx.min.cssに

html / js

• gulp-coffee：Coffescriptをjavascriptに変換
• gulp-prettify：html整形
• gulp-uglify：jsをminify化する
• gulp-watch：ブラウザの同期とリロード

画像圧縮

• gulp-imagemin：画像サイズを圧縮
• imagemin-pngquant：pngファイルを圧縮

以上、駆け足になりましたが「Node.jsを使って何ができるのか、インストール方法、どこまで効率的になるのか」ということを自分なりに勉強する形でメモしました。今回は雰囲気を掴むためにザックリ書きましたが、次は深く掘り下げて書いていきたいと思います。