Gulpを触ってみた
ひっさびさにこっちのブログを書きます。
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プラグインが良さそうです。
また別のところで似たような記事を書きそうです・・・w