どーも、デザインちーむのさむです。
相変わらず、Huluにはまって抜け出せそうにない感がハンパない今日この頃です。
そしてちょっと前からこの番組にハマってます！
- 「サバイバルゲーム」
- イギリス軍特殊部隊の元隊員ベア･グリルスが普通の旅行者が最も過酷な環境下に置かれたときのサバイバルテクニックを伝授する番組。
それはさておき、本日取り上げるのは、今さら感のある「Gulp」についてです。
みなさん使ってますか？？？
使わないとヤバいですよ！業界ではデファクトスタンダードになってる感がとてつもないですから。
以前書いた「Grunt」とほぼ同等の機能を持っていますが、シンプルな記述と高速な動作で現在は「Gulp」の方が主流なのではないでしょうか。
最近では「WebPack」も人気があるようですね。
- 以前の記事はこちら
- 「Gruntの使い方。作業効率を上げる便利な自動タスクツール。」
ではでは、そんな便利なツールの説明をしていきます。（※Windows7環境での説明となります）
目次
Gulpとは
「Grunt」と同様でフロントエンド周りの様々なタスクを自動で行ってくれるタスク自動化ツールです。
CSSのminify、画像の圧縮、ベンダープレフィックス自動付与などなどです。
導入することによって間違いなく作業効率が上がります！
公式サイトは以下になります。
http://gulpjs.com/
Gruntとの違い
「Gulp」は今っぽい感じで、シンプルで柔軟に書くことができる。並列処理を行うので処理速度が速い。
そのような感じでしょうか。
では、手を動かしてみましょう。
Node.jsのインストール
こちらの手順は以前の記事に書いてあるので、そちらをご確認ください。
- 手順はこちら
- 「Gruntの使い方。作業効率を上げる便利な自動タスクツール。」
作業ディレクトリ作成 & 作業ディレクトリへ移動
続いては、作業をするディレクトリを作成します。
どこでも良いのですが分かりやすい場所にすると良いと思います。
今回はデスクトップに作成したいと思います。
cd desktop
mkdir gulp_dev
デスクトップにgulp_devというフォルダを作成しました。
（CUIでの操作表示となってますが、GUIで操作し作成しても問題ありません）
続いて、作成したディレクトリに移動します。
cd gulp_dev
npm init
移動したら次のコマンドを入力します。
（※ここからはコマンドプロンプトなどのCUI操作をする必要があります！）
npm init
色々な質問が出てきますが、とりあえずすべてEnterを押して進めてください。
$ npm init
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 --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: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\webstaff\desktop\test\package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
そうすると先ほどのgulp_devディレクトリにpackage.jsonが作成されます。
（※すべての設定が終わったら、このpackage.jsonを他の作業者に渡すことで、自分と同じ環境を作ってもらうことが簡単にできます）
{
"name": "gulp_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Gulpのインストール
続いてはグローバル環境にGulpをインストールします。
以下のコマンドを実行してください。
npm install -g gulp
グローバル環境にインストールできたら、続いてはローカル環境にもインストールしていきます。（ちょっとややこしいですが、このようなものだと思ってください…）
以下のコマンドを実行します。
npm install --save-dev gulp
このコマンドは省略形があります。
以下の省略形でも実行されますので、今後は以下のように記載します。
npm i -D gulp
ここで先ほどのpackage.jsonを確認すると、devDependecesにgulpが記載されています。
"devDependencies": {
"gulp": "^3.9.0"
}
そしてnode_modulesというフォルダも作成されて、データが保存されます。
このようにインストールを行ったものが–save-devによって自動的に記載されていきます。これによって他の作業者が環境を構築することを容易にしてるんですね。
例えば、他の共同作業者からpackage.jsonをもらったら、npm installを行うだけで上記の記載を参照して自動的に必要なものをインストールしてくれます！
便利ですね～☆
gulpfile.jsの作成
続いてはgulpfile.jsの作成を行います。
このファイルを作成することによってgulpにどのような処理を行わせるのかを制御することができます。
では作成していきましょう。
新規ファイルをpackage.jsonと同じディレクトリに作成します。
以下を記述してgulpを呼び出し、扱えるように読み込みます。
var gulp = require("gulp");
これでgulpが扱えるようになりました。
CSSの圧縮
サンプル用のフォルダ構成作成
基本的な設定はできましたので、CSSの圧縮を行う処理を追加してみたいと思います。
例として以下のフォルダ構成にしてサンプルファイルなどを配置してみましょう。
gulp_test
node_modules
src
index.html
css
style.css
gulpfile.js
package.json
srcフォルダにはgulp実行前のデータを配置しています。
style.cssには以下を記述してます。
@charset "UTF-8";
.test {
display: table-cell;
vertical-align: middle;
font-size: 13px;
font-size: 1.3rem;
color: #0e0e0e;
font-weight: bold;
line-height: 1.385;
padding-left: 20px;
}
CSS圧縮用のプラグインインストール
サンプル用のフォルダ構成ができましたら、続いてはプラグインをインストールしていきます。
下記を実行します。
npm i -D gulp-cssmin
gulpfile.jsの編集
続いて実行させるタスクをgulpfile.jsに書き加えます。
gulpfile.jsは以下のようになります。
var gulp = require("gulp");
var cssmin = require('gulp-cssmin');
gulp.task('cssmin', function () {
gulp.src('css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('cssmin'));
});
記述し保存したらコマンドプロンプトから下記を実行。
gulp cssmin
destフォルダが作成され、圧縮されたcssが出力されたでしょうか？
フォルダが無い場合は自動的に作成してくれます。
基本的には上記の手順で追加したいプラグインをどんどんインストールして、タスクをgulpfile.jsに記述していくことになります。
gulpfile.jsの解説
さきほどのgulpfile.jsへの編集を見てみましょう。
var gulp = require("gulp");
var cssmin = require('gulp-cssmin');
gulp.task('cssmin', function () {
gulp.src('css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('cssmin'));
});
上記の記述をすることにより処理を実行します。
※4行目のcss/*.cssという記述はcssフォルダ直下のすべてのcssファイルという指定。
変更ファイルを監視させる
さきほどの設定ですと、元ファイルに変更を加えるたびにコマンド（gul cssmin）を実行させる必要がありました。
でも、それだと面倒ですよね。
Gruntではフォルダを監視させるためにはプラグインをインストールしなければいけませんでしたが、gulpではプラグインをインストールしなくてもデフォルトで実行させることが可能になってます。
gulpfile.jsに以下の記述を行います。
gulp.task("default", function() {
gulp.watch("src/css/*.css",["cssmin"]);
});
上記を追記するとgulpfile.jsは以下のようになります。
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
gulp.task('cssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('dest/cssmin'));
});
gulp.task("default", function() {
gulp.watch("src/css/*.css",['cssmin']);
});
今度はgulp cssminではなく、gulpとコマンド実行させてください。
その後、cssファイルを修正してみてください。
いかがですか？
修正をして保存を実行するとcssminが自動的に実行されましたね！
これはとても便利。
※監視状態を終了させるにはctrl + cです！
gulpfile.jsの解説
この処理は必須ですね。
その他の便利な機能
基本的なことはできましたので、次からは便利な機能などを簡単にご紹介します。
cssのベンダープレフィックスを自動的に付与する
sassやcompassでも対応可能ですが、gulpでもできます。
以下を実行
npm i -D gulp-autoprefixer
gulpfile.jsに以下を追記
var autoprefixer = require("gulp-autoprefixer");
.pipe(autoprefixer())
追記すると以下になります。
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var autoprefixer = require("gulp-autoprefixer");
gulp.task('cssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(gulp.dest('dest/cssmin'));
});
gulp.task("default", function() {
gulp.watch("src/css/*.css",['cssmin']);
});
この状態で、ベンダープレフィックスが必要なものを記述してみてください。
ちゃんとベンダープレフィックスが付与されましたね！
とても便利。
エラーが起きてもwatchを止めない
元ファイルに誤った記述をするとエラーが発生して監視状態が止まってしまいます。
そうなると元ファイルを修正して再度コマンドを実行させなければなりません。
ちょっと不便ですよね。
そこでgulp-plumberをインストールします。
npm i -D gulp-plumber
gulpfile.jsに下記を追記
var plumber = require("gulp-plumber");
.pipe(plumber())
追記すると以下になります。
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var autoprefixer = require("gulp-autoprefixer");
var plumber = require("gulp-plumber");
gulp.task('cssmin', function () {
gulp.src('src/css/*.css')
.pipe(plumber())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(gulp.dest('dest/cssmin'));
});
gulp.task("default", function() {
gulp.watch("src/css/*.css",['cssmin']);
});
これでエラーが起きても監視状態が止まることはなくなりました。
LiveReload
ファイルに変更を加えてブラウザで確認するときに、毎回更新ボタンを押すのはちょっと手間ですよね。
そこでブラウザの更新も自動化させちゃいましょう！
browser-syncをインストールします。
npm i -D browser-sync
gulpfile.jsを以下のように修正
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var autoprefixer = require("gulp-autoprefixer");
var plumber = require("gulp-plumber");
var browser = require("browser-sync");
gulp.task("server", function() {
browser({
server: {
baseDir: "./"
}
});
});
gulp.task('cssmin', function () {
gulp.src('src/css/*.css')
.pipe(plumber())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(gulp.dest('dest/cssmin'))
.pipe(browser.reload({stream:true}))
});
gulp.task("default",['server'], function() {
gulp.watch("src/css/*.css",['cssmin']);
});
トップディレクトリに以下のindex.htmlを配置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gulp_test</title>
<link rel="stylesheet" href="dest/cssmin/style.css">
</head>
<body>
<h1 class="test">Gulpのテストですよ！</h1>
</body>
</html>
cssを以下のように修正
@charset "UTF-8";
.test {
font-size: 30px;
font-size: 3rem;
color: red;
font-weight: bold;
}
この状態でgulpを実行。
すると自動的にブラウザが立ち上がりますね。
さらに、cssの文字色などを編集して保存してみてください。
保存すると自動的にブラウザが更新されて修正が反映しましたね！
これは便利。
さいごに
まだまだgulpには便利なプラグインが多数あります。
まずは色々と試してみて、自身のプロジェクトに利用できるかを確認してみてはいかがでしょうか。
そして、じゃんじゃん作業を効率化しちゃってください！！
それでは、快適なフロントエンドライフを！
