GulpでJavaScript開発効率化

WEBページに掲載されている広告ありますよね。

あんな感じの広告をJavaScriptタグで配信する機能の開発を行っています。

今回、プロジェクト内でGulp（ガルプ）を使っていたので、触れた感想について書きたいと思います。

Node.jsのインストール

Gulpを使うにはNode.jsが必要です。公式サイトよりインストーラのダウンロードとインストールを行います。

インストール確認

$ node -v
v6.1.0

Gulp.jsインストール

グローバル

node.js配下のディレクトリにパッケージが展開されます

sudo npm install gulp -g

ローカル

カレントディレクトリのnode_module配下にパッケージが展開されます

npm install --save-dev gulp

package.jsonの作成

初回は下記コマンドでpackage.jsonを作成します。

今回は既存のプロジェクトの為、既にpackage.jsonがありますので、この作業はスキップしました。

npm init

gulpfile.jsの作成

このファイルに実行するタスクを記述していきます。

今回は、ファイルに変更があったら自動で*.min.jsに圧縮するようにしたいと思います。

圧縮後の.min.jsへのリネームは、gulp-renameというライブラリを使います

gulp-renameインストール

（既存プロジェクトでは既にインストールされていたので、この工程はスキップしました）

npm install --save-dev gulp-rename

gulp-uglifyインストール

次いで圧縮ライブラリのインストール

（既存プロジェクトでは既にインストールされていたので、この工程はスキップしました）

npm install --save-dev gulp-uglify

gulpfile.jsにコードを記述

var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// .js to .min.js
gulp.task("js_min", function() {
    gulp.src(['./**/*.js', '!./**/*.min.js'])
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' })) 
        .pipe(gulp.dest(./));
});
gulp.task('watch', function(){
    gulp.watch('./**/*', [
        'js_min'
    ]); 
});

ポイントはパスの書き方。

上記の場合は、修正したファイルと同じパスに.min.jsをディレクトリ再帰して吐き出してくれます。

Watchしてみる

$ gulp watch
[16:38:12] Using gulpfile gulpfile.js
[16:38:12] Starting 'watch'...
[16:38:12] Finished 'watch' after 13 ms

この状態でJSを改修すると、.min.jsが自動で出来ている事が確認出来ました。

プラグイン

Gulpは沢山のプラグインが出てますね。自分がよさそうだなと思ったのを紹介します。

gulp-rename

今回使用したプラグイン

gulp-uglify

今回使用したプラグイン

browser-sync

ファイル保存時に、ブラウザをオートリロードしてくれる

gulp-jshint

JavaScriptの文法チェック自動化

便利なサイト

gulpfile.jsとpackage.jsonを自動生成してくれるサイト。これは便利。

steelydylan.github.io

まとめ

今まで、JSとしっかり向き合う事があまりなかったです（反省）

Gulpに代表されるような便利な機能を使うか使わないかでは、開発効率に大きく差が出てきますね。

機械が出来る事は機械に任せて、人間にしか出来ない事をやる事でもっとラクしなければ！と思いました。