Gulpを触ってみた - typeof Diary

ひっさびさにこっちのブログを書きます。
Gulpを少し触ってみたので、備忘録として、導入からJavaScriptの結合とミニファイまでを書いておきます。

Gulpってなんぞや。
フロントエンドのビルドツールで良いのかな。
Gruntで気になったところが改善されているとかされてないとか。。。
Gruntも一応、結合ミニファイぐらいまでは触ってはみましたが。

ひとまず、ググッてもらえれば！

ではでは先に進みましょう。

Node.jsは入れていること前提。
%brew install node

導入

%npm install -g gulp
gulp -vでバージョン確認しておきましょう。

ここでgulpとか打って、not found的なこと言われたら、%npm link gulpとかで多分。。。
あとは%npm initして、package.jsonも作っておきましょう。

準備

使い方を軽くやるだけなので、試すためのディレクトリを作成しておきます。ここはなんでも。
中にはgulpfile.jsを作成しておきます。

タスクを作ってみる

お決まりのHello Worldやっておきます。

// gulpfile.js
var gulp = require('gulp');

// タスクを登録
gulp.task('hello', function () {
  console.log('Hello World');
});

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

ここまでで保存して、%gulpを叩けば、Hello Worldと出力されるはずです。
%gulp helloでも構いません。

gulp.task('task_name', function () { /* 処理 */ });みたいなイメージ。
defaultに登録したものは%gulpとした場合に実行されます。

動くことが確認できたので、次いきます。

結合、ミニファイを行う

プラグインを導入

プラグインを導入します。
%npm install gulp-concat --save-dev
%npm install gulp-uglify --save-dev

タスクを書く

先ほどはgulpfileに直接書きましたが、今回はファイルを分けます。さっき作ったディレクトリ内に、tasksディレクトリを作ります。(好きな名前で良いです) 今回は結合→ミニファイをするタスクということで、tasks/concat-minify.jsみたいにしておきましょう。

module.exports = function (gulp) {
  // プラグイン
  var concat = require('gulp-concat'),
      uglify = require('gulp-uglify');

  // タスク登録
  gulp.task('concat-minify', function () {
    gulp.src('js/*.js') // 対象ファイル
        .pipe(concat('sample.min.js')) // 出力ファイル名
        .pipe(uglify()) // ミニファイ
        .pipe(gulp.dest('js/min')); // 出力先ディレクトリ
  });
};

内容はコメント通りです。今回はjs以下の.jsファイルをjs/min以下にsample.min.jsとして出力させます。

gulpfile.jsを書き換えます。

var gulp = require('gulp');

require('./tasks/concat-minify.js')(gulp);

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

こんな感じで。

実行

ここまでできたら後は実行するだけです。 %gulp concat-minifyまたは%gulpで。。。

すると、js以下のjsファイルが結合され、ミニファイされたものがjs/min以下に出力されているのが確認できるはずです。

// js/sample1.js
var sample1 = function () {};

sample1.prototype = {
  showSample: function () {
    alert('Sample1');
  }
};

// js/sample2.js
var sample2 = function () {};

sample2.prototype = {
  showSample: function () {
    alert('Sample2');
  }
};

↑例えばこんなファイル。

実行後に

// js/min/sample.min.js
var sample1=function(){};sample.prototype={showSample:function(){alert("Sample1")}};var sample2=function(){};sample.prototype={showSample:function(){alert("Sample2")}};

こんな感じになっていれば！

さいご

簡単にですが、結合ミニファイまで。今回は簡単やりたいので、結合とミニファイを同時にやりましたが、これを結合は結合、ミニファイはミニファイなど分けることも可能です。

また、watchなんかを使えば、ファイルを監視して、編集されたら自動実行なんてのも可能です。

結合→ミニファイを手動でやるのは正直手間ですし、不具合の元なので、このように自動化できると便利ですね。

あと、まとめたものを即時関数で囲いたい！場合は、concatよりも、concat-utilプラグインが良さそうです。

また別のところで似たような記事を書きそうです・・・ｗ