いまさらgulpはじめてみました
GulpとかGruntとか「タスクランナー」って聞くとだいぶ敷居がたけえなって感じていた私。
「色々何でもタスクにしてGulpとか使うとめっちゃはかどるよ！！」
って言われても色々何でもって・・・覚えること多そう・・・
ってなってずっと敬遠してたんですがこのたび重い腰をあげて、
ようやっと手をだしてみたのでまとめます。
同じように感じていた人が使ってみてうおーってなってくれるとうれしい。
なるべく分かりやすくgulpがどんな感じのものか手順をまとめたつもりなので、
上から順番に手元で動かしながら試してみてもらえばと。
とりあえずやってみたこと(gulpにどんなタスクを実行させたか)
- CSSとかJSとかを更新するとブラウザが自動的に更新される。
CSS・JSを編集して、ブラウザに切り替えて、F5押して・・・っていう作業をしなくてよくなります。 - CSS・JSファイルを圧縮する。
ファイル容量が意外に圧縮されるのでページ読み込みが多少早くなると思います。
動作確認環境
- Windows7
- npm
$ npm -v
1.4.28
※node.jsがインストールされていない場合は、
公式からダウンロードするか、OSのパッケージ等をご利用ください。
http://nodejs.org/
- gulp
$ gulp -v
[16:37:33] CLI version 3.8.10
※gulpがインストールされていない場合は、
$ npm install -g gulp
でgulpをインストールしてください。
サンプルソースをダウンロードする
https://github.com/blue-goheimochi/gulp-sample/releases
こちらにサンプルソースを置いておりますので、
zipかtar.gzのアーカイブをダウンロードして、デスクトップなどで解凍してください。
必要なパッケージをインストールする
npmを使って必要なパッケージをインストールします。■package.jsonを作成
- package.json
{
"devDependencies": {
"gulp": "^3.8.8",
"gulp-minify-css": "^0.4.6",
"gulp-uglify": "^1.1.0",
"browser-sync": "^2.0.0"
}
}
解凍したディレクトリ直下にpackage.jsonを上記の内容で作成してください。
【参考】
Add package.json for install dependencies · e13af57 · blue-goheimochi/gulp-sample · GitHub
■パッケージのインストール
$ npm install
解凍したディレクトリに移動してnpm installコマンドを実行してください。
node_modulesディレクトリが作成されてその中にパッケージがインストールされます。
gulpfile.jsを作成しgulpを実行してみる。
■gulpfile.jsを作成
- gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('default', function(){
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
解凍したディレクトリ直下にgulpfile.jsを上記の内容で作成してください。
【参考】
Add gulpfile.js for browser start-up · 1634aba · blue-goheimochi/gulp-sample · GitHub
■gulpを実行
$ gulp
解凍したディレクトリにカレントディレクトリを移動してgulpコマンドを実行してください。
自動的にブラウザが開いたでしょうか！？
ブラウザが開けば、gulpの実行は成功です。
「ctrl」+「c」でgulpの実行を停止できます。
gulpコマンドとタスクについて
$ gulp
gulpコマンドでgulpを実行すると、defaultのタスクが実行されます。
サンプルで言うと、
gulp.task('default', function(){
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
ここの部分が実行されます。
サンプルではこの部分でブラウザを起動するようになっています。
また別のタスクを定義することもできます。
ブラウザを起動するプログラム部分をbrowser-syncというタスクに定義し、
defaultタスクから呼ぶように修正します。
- gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
// browser-syncタスクの追加
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
// defaultタスクからbrowser-syncタスクを呼び出すように変更
gulp.task('default', ['browser-sync']);
このようにするとdefaultタスク実行時にbrowser-syncタスクが実行されるようになります。
■gulpを実行
実際にgulpコマンドを実行してみましょう。$ gulp
先ほどと同様にブラウザが開かれると思います。
【参考】
Change default task to browser-sync task · b3b274a · blue-goheimochi/gulp-sample · GitHub
public_html/css/app.cssが変更されたらブラウザが更新されるようにする
ファイルの変更を監視するためにはgulp.watch()を使います。
gulpfile.jsを以下のように変更します。
- gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function(){
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
gulp.task('default', ['browser-sync'], function(){
// gulp.watch()を追加。
gulp.watch(['./public_html/css/app.css'], function(){
browserSync.reload();
});
});
この追加部分を補足すると、
gulp.task('default', ['defaultタスク実行前に実行するタスク'], function(){
gulp.watch(['監視対象とするファイル'], function(){
browserSync.reload(); // 監視対象のファイルが変更されたときに実行される処理
});
});
という形になります。
サンプルソースの流れだと
gulpコマンドを実行するdefaultタスクが呼び出されるbrowser-syncタスクがまず実行されるdefaultタスク内のgulp.watch()が実行されるpublic_html/css/app.cssが変更されるとbrowserSync.reload();が実行される
という流れで実行されていきます。
■public_html/css/app.cssを変更する
public_html/css/app.cssのどこかを変更してみましょう。たとえば、
body {
color: #363947;
font-size: 15px;
background: #FF0000;
}
bodyにbackgroundを設定して保存してみます。
うまくいけば、自動的に既に起動していたブラウザが更新され、
背景が赤色に変わっていると思います！
その他の箇所でもpublic_html/css/app.cssが変更されると、
ブラウザが自動的に更新されるはずなので色々変更してみましょう。
【参考】
Modified gulpfile.js for app.css watching · 23568dc · blue-goheimochi/gulp-sample · GitHub
public_html/js/app.jsも監視対象に設定する
CSSファイルに続いてJSファイルも監視対象に設定してみます。
public_html/js/app.jsが監視対象になるように以下のように変更します。
- gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function(){
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch([
'./public_html/css/*.css',
'./public_html/js/*.js' // 監視対象にJSファイルを追加
], function(){
browserSync.reload();
});
});
上記のようにgulp.watch()は監視対象とするファイルを複数指定することができます。
またお気付きになったかもしれませんが、
ファイルの指定には「*」(ワイルドカード)も指定できるので、
このように指定を入れておくことで、別のcss、jsが追加された場合でも、
追加されたファイルが監視対象になってくれます。
■public_html/js/app.jsを変更する
public_html/js/app.jsを変更してみましょう。
function btnClick() {
alert('Bye!');
}
alert();のメッセージを「Hello!」から「Bye！」に変えてみました。
デザインには影響はないと思うので変化はなさそうですが、
「Click Me!」のボタンを押すと実際に「Bye!」とアラートが出ると思います。
【参考】
Modified gulpfile.js for app.js watching · 731e6df · blue-goheimochi/gulp-sample · GitHub
CSSを圧縮する
CSSをgulpのタスクで圧縮することができます。public_html/css/app.cssを圧縮すると、
Modified gulpfile.js for minify app.css · 97286b7 · blue-goheimochi/gulp-sample · GitHub
このような感じでCSSの機能を保ったまま圧縮されます。
（「Diff suppressed. Click to show.」をクリックして確認してみてください。）
圧縮すると可読性は下がってしまうので、
修正自体は圧縮されていないCSSに手を加えて、
その後圧縮するという流れにするために、
resource/css/app.cssに圧縮前のCSSを配置し、
それを圧縮してpublic_html/css/app.cssに書き出す。
という方法でやります。
■resource/css/app.cssを作成
public_htmlと同じ位置にresourceディレクトリを作成し、その中にcssディレクトリを作成。そして
public_html/css/app.cssをresource/css/app.cssに配置するようにコピーします。■gulpfile.jsを修正
gulpfile.jsを修正します。
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css'); // 追記
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
// minify-cssのタスクを追加
gulp.task('minify-css', function () {
gulp.src(['./resource/css/app.css'])
.pipe(minifyCSS())
.pipe(gulp.dest('./public_html/css')
);
});
gulp.task('default', ['browser-sync','minify-css'], function(){ // minify-cssタスクがdefaultタスクで実行されるように追加
gulp.watch([
'./public_html/css/*.css',
'./public_html/js/*.js'
], function(){
browserSync.reload();
});
});
修正箇所は3点で、
var minifyCSS = require('gulp-minify-css');を追記。minify-cssのタスクを追加minify-cssタスクがdefaultタスクで実行されるように追加
です。
■gulpを実行
$ gulp
今まで通りブラウザが起動し見た目には変わりがないと思いますが、
public_html/css/app.cssを確認するとCSSが圧縮されているのが分かると思います。
【参考】
Modified gulpfile.js for minify app.css · 97286b7 · blue-goheimochi/gulp-sample · GitHub
JSを圧縮する
CSSと同様にJSも圧縮してみましょう。■resource/js/app.jsを作成
resourceディレクトリの中にjsディレクトリを作成。そして
public_html/js/app.jsをresource/js/app.jsに配置するようにコピーします。■gulpfile.jsを修正
gulpfile.jsを修正します。
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify'); // 追記
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
gulp.task('minify-css', function () {
gulp.src(['./resource/css/app.css'])
.pipe(minifyCSS())
.pipe(gulp.dest('./public_html/css')
);
});
// compressのタスクを追加
gulp.task('compress', function () {
gulp.src(['./resource/js/app.js'])
.pipe(uglify())
.pipe(gulp.dest('./public_html/js')
);
});
gulp.task('default', ['browser-sync','minify-css','compress'], function(){ // compressタスクがdefaultタスクで実行されるように追加
gulp.watch([
'./public_html/css/*.css',
'./public_html/js/*.js'
], function(){
browserSync.reload();
});
});
修正箇所は3点で、
var uglify = require('gulp-uglify');を追記。compressのタスクを追加compressタスクがdefaultタスクで実行されるように追加
です。
■gulpを実行
$ gulp
ブラウザが起動し、
public_html/js/app.jsを確認するとJSが圧縮されていると思います。
ちょっとサンプルのJSだと圧縮の効果が薄いですがしっかりと圧縮がかかっているのが分かると思います。
【参考】
Modified gulpfile.js for compress app.js · 8fcb7cd · blue-goheimochi/gulp-sample · GitHub
タスクを個別に呼び出す
タスクを個別に呼び出すには、$ gulp [タスク名]
でコマンドを実行します。
gulpコマンドを実行した場合はdefaultタスクが実行されますが、
gulp.watch()でのファイル監視はgulpコマンドでは動かなくていいといいよ。
という場合などに活用できます。
サンプルでは
$ gulp
が実行された場合はCSS・JSの圧縮のタスクのみが実行され、
$ gulp watch
が実行された場合のみgulp.watch()が実行されファイルの監視をするようにしています。
■gulpfile.jsを修正
gulpfile.jsを修正します。
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public_html",
port: 8080
}
});
});
// ブラウザをリロードをタスクに切り出し
gulp.task('bs-reload', function() {
browserSync.reload();
});
gulp.task('minify-css', function () {
gulp.src(['./resource/css/app.css'])
.pipe(minifyCSS())
.pipe(gulp.dest('./public_html/css')
);
});
gulp.task('compress', function () {
gulp.src(['./resource/js/app.js'])
.pipe(uglify())
.pipe(gulp.dest('./public_html/js')
);
});
// watchのタスクを追加
gulp.task('watch', ['browser-sync'], function () {
gulp.watch([
'./resource/css/*.css', // resource/css/の中のCSSを監視するように修正
'./resource/js/*.js' // resource/js/の中のJSを監視するように修正
], ['minify-css','compress', 'bs-reload']); // 監視対象のファイルに変更がかかると、CSSの圧縮、JSの圧縮、ブラウザのリロードが実行される
});
// defaultタスクではCSS・JSの圧縮のみ実行されるように変更
gulp.task('default', ['minify-css','compress']);
■gulpを実行
$ gulp
CSS・JSの圧縮のみが実行されます。
■gulp watchを実行
$ gulp watch
ブラウザが起動し、ファイル監視が行われます。
resource/css/*.css、resource/js/*.jsが変更されると、
public_html/css/*.css、public_html/js/*.jsに圧縮されたファイルが作られるとともに、
ブラウザがリロードします。
まとめ
いかがでしたでしょうか？少し手順は多くなってしまいましたが、
この2つのタスクをgulpで実行することができました。
他にも、
・・・などなど、色々なことができます！
「こんなことタスク化しておきたいな・・・」、「この手作業自動化できないかな・・・」
って思ったら、自分でコマンドを書いても実現できるかもしれないですし、
探してみると既にそれにマッチしたgulpのプラグインも見つかるかもしれません。
gulpのプラグインは下記に色々上がっておりますので、
こちらから探してみても面白いと思います！
以上、gulp食わず嫌いのあなたのお力になれたら幸いです。
