Sassのコンパイルやブラウザのリロード、画像、JS、CSSの圧縮などの処理をを自動でやってくれるタスクランナーの一つ、gulpの導入から試しに使ってみるまでをやってみます。

gulpの導入

Node.jsのインストール

gulpを使うにはNode.jsが必要なため、Node.jsをインストールします。

まずはMacはターミナル、Windowsはコマンドプロンプトを開いて以下を打ってください。

node -v

何かしらバージョンが出たら、インストールされています。インストールされていればOKです。

ない場合は以下の公式サイトからインストールするか、NodeBrewなどでインストールしてください。

Node.js

gulpのインストール

まずは、PCのどの場所でもgulpが使えるように、グローバルでgulpをインストールします。

ということは頭に置いといた上で、今回は初めて使う人向けに書いてるので、公式サイトの手順通りやっていきます。

2016/2/9 修正箇所
gulpのインストール方法を変更しました。

gulpのGetting Startを見るとグローバルインストールのところが変更されてます。

従来は以下のコマンドでインストールしていました。

npm install -g gulp

もし既に従来の方法でインストールしていた場合は、衝突を防ぐために以下を実行してくださいと書いてあります。

npm rm --global gulp

これを行うと一旦gulpが削除されます。

gulpインストールが初めての方、もしくは上記の処理が終わったら、
以下のコマンドを実行します。

npm install --global gulp-cli

コマンドが実行されて、とくにエラーなく完了するとgulpのインストール完了です。

ターミナルで以下コマンドを打つとgulpのバージョンが表示されると思います。

gulp -v

これでプロジェクトにgulpを導入する準備は整いました。

package.jsonの作成

まずは、gulpを使用したいプロジェクトフォルダへ移動します。

以下のような感じで、コマンドを打って移動することができます。

[ターミナル]

cd /Users/MyName/sample

が、黒い画面に不慣れでも簡単にディレクトリ移動する方法で、
とりあえず「cd」とだけ打って、半角スペースを開けます。

その状態で、移動したいディレクトリをターミナル/コマンドプロンプト上にドラッグ&ドロップし、Enterをクリックします。

これで移動は完了です。

Macだとターミナル上で、
「User名のMac:ディレクトリ名 User名$」という感じになっていると思います。

package.jsonを作る

プラグインをインストールする前に以下コマンドを実行し、package.jsonを作成しておきます。

[ターミナル]

npm init

実行すると、途中でプロジェクト名とかいろいろと設定を聞かれますが、とりあえずEnter連打で大丈夫です。
何か設定が必要な場合は調べて設定してみてください。

どうせEnter連打するなら以下コマンドでもいいです。

npm init -y

プロジェクトフォルダを開いてみると「package.json」ができているはずです。

中をみるとこんな感じ

[package.json]

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

途中で聞かれた設定を入力するとここに反映されるみたいです。

インストールしてくプラグインの情報などはここに書き込まれていきます。

プロジェクトフォルダにgulpをインストール

グローバルインストール後、実際にgulpを使うには
プロジェクトフォルダ内でもgulpをインストールする必要があります。

以下コマンドでプロジェクトフォルダにgulpをインストールします。

[ターミナル]

npm install gulp --save-dev

この「-save-dev」が何なのかは下で書きます。

インストール後「gulpfile.js」というjsファイルを作り、以下を記述しておいてください。

[gulpfile.js]

//plug-in
var gulp = require('gulp');

プラグインのインストール

プラグインのインストールとアンインストールは以下のコマンドでやります。

[ターミナル]

// プラグインのインストール
npm install プラグイン名 --save-dev
// プラグインのアンインストール
npm uninstall プラグイン名 --save-dev

// npm install プラグイン名 --save-dev
npm i プラグイン名 -D
// npm install プラグイン名 --save
npm i プラグイン名 -S

また複数のプラグインを一括でインストールすることもできます。

[ターミナル]

npm install プラグイン名 プラグイン名 ... -D

gulp-minify-cssをつかってみる

とりあえず分かりやすいCSSを圧縮するプラグインをインストールしてみます。

以下を実行します。

[ターミナル]

npm install gulp-minify-css --save-dev

そしてgulpfile.jsに「var sass = require(‘gulp-minify-css’);」を追記します。

最初に記述したのと合わせるとこんな感じに

[gulpfile.js]

//plug-in
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');

このvarから始まる変数でインストールしたプラグインを登録してく感じになります。

そして以下を記述します。

[gulpfile.js]

//CSS圧縮
gulp.task('minify-css', function() {
  return gulp.src("css/*.css")
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css/'));
});

‘minify-css’というのがタスク名で、srcの後に書かれている”css/*.css”が対象のファイルを示しています。(*は全てという意味）

現在のプロジェクトフォルダ内はこんな感じです。

タスクの実行は「gulp タスク名」というコマンドで開始します。

以下を実行すると、cssデイレクトリ以下の全てのCSSが圧縮されます。

[ターミナル]

gulp minify-css

黒い画面の動きが止まって、再びプロジェクトフォルダ内を見ると、、

左下に「dist」というフォルダができている..！！

この中には、CSSフォルダができていて、その中に圧縮されたstyle.cssがあります。

先ほどgulpfile.js内に書いた「gulp.dest(‘dist/css/’)」この部分。
dest(‘保存先フォルダ’)となっています。

また、今は「gulp minify-css」と特定のタスクを実行しましたが、
gulpfile.jsに以下を追記します。

[gulpfile.js]

gulp.task('default',['minify-css']);

これを記述すると、「gulp」というコマンドでも実行されます。

これは記述の通り、gulpのデフォルトタスクの実行で、
gulp.task(‘default’,[‘タスク名’,’タスク名’,’タスク名’,…]);
というふうにタスクを登録して「gulp」コマンドで一括で実行できます。

ひとまず、今までの記述をまとめると

[gulpfile.js]

//plug-in
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
//pass
var path = {
  js: ['js/*.js'],
  css: ['css/*.css']
}
//CSS圧縮
gulp.task('minify-css', function() {
  return gulp.src("css/*.css")
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css/'));
});
gulp.task('default',['minify-css']);

そして、以下で実行

[ターミナル]

gulp

簡単ですね！

さいごに

思った以上に簡単に導入できるgulp

CSSの圧縮はほんの一つで、他にもSassのコンパイルやJS・画像の圧縮、
さらにソースを修正したら自動で複数ブラウザでブラウザがリロードされたり、
もっと便利に使うことができます。

人によっても案件によってもどんなgulp設計がいいか変わってきますが、
このブログでもまたおすすめプラグインや設定なんかを紹介できればと思います。

Tweet

Pocket