終電23時15分って早くね?

都内のIT企業で働くカラオケ大好きエンジニアの雑記

いまさらgulpはじめてみました

GulpとかGruntとか「タスクランナー」って聞くとだいぶ敷居がたけえなって感じていた私。
「色々何でもタスクにしてGulpとか使うとめっちゃはかどるよ!!」
って言われても色々何でもって・・・覚えること多そう・・・
ってなってずっと敬遠してたんですがこのたび重い腰をあげて、
ようやっと手をだしてみたのでまとめます。
同じように感じていた人が使ってみてうおーってなってくれるとうれしい。

なるべく分かりやすくgulpがどんな感じのものか手順をまとめたつもりなので、
上から順番に手元で動かしながら試してみてもらえばと。

とりあえずやってみたこと(gulpにどんなタスクを実行させたか)

  • CSSとかJSとかを更新するとブラウザが自動的に更新される。
    CSS・JSを編集して、ブラウザに切り替えて、F5押して・・・っていう作業をしなくてよくなります。
  • CSS・JSファイルを圧縮する。
    ファイル容量が意外に圧縮されるのでページ読み込みが多少早くなると思います。

動作確認環境

$ 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

こちらにサンプルソースを置いておりますので、
ziptar.gzのアーカイブをダウンロードして、デスクトップなどで解凍してください。

必要なパッケージをインストールする

npmを使って必要なパッケージをインストールします。

■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(); // 監視対象のファイルが変更されたときに実行される処理
    });
});

という形になります。

サンプルソースの流れだと

  1. gulpコマンドを実行する
  2. defaultタスクが呼び出される
  3. browser-syncタスクがまず実行される
  4. defaultタスク内のgulp.watch()が実行される
  5. 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.cssresource/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.jsresource/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/*.cssresource/js/*.jsが変更されると、
public_html/css/*.csspublic_html/js/*.jsに圧縮されたファイルが作られるとともに、
ブラウザがリロードします。

【参考】
Modified gulpfile.js for devide default task and watch task · cfd9b30 · blue-goheimochi/gulp-sample · GitHub

まとめ

いかがでしたでしょうか?

少し手順は多くなってしまいましたが、

  • CSSとかJSとかを更新するとブラウザが自動的に更新される。
  • CSS・JSファイルを圧縮する。

この2つのタスクをgulpで実行することができました。

他にも、

  • 複数CSSファイルを1つのファイルにまとめて書き出す
  • sass、lessのファイルをコンパイルしてCSSに書き出す

・・・などなど、色々なことができます!

「こんなことタスク化しておきたいな・・・」、「この手作業自動化できないかな・・・」
って思ったら、自分でコマンドを書いても実現できるかもしれないですし、
探してみると既にそれにマッチしたgulpのプラグインも見つかるかもしれません。
gulpのプラグインは下記に色々上がっておりますので、
こちらから探してみても面白いと思います!


results for gulp

以上、gulp食わず嫌いのあなたのお力になれたら幸いです。