LoginSignup
35

More than 5 years have passed since last update.

Gulp インストールから 本番環境と開発環境の使い分けまで

Last updated at Posted at 2016-03-19

Gulp

フロントサイドの開発でのjavascript のコンパイル、CSS の圧縮などを行うタスクランナー。
詳細は公式サイトを参照。

バリバリのサーバーサイドエンジニアの自分がなぜ自分がGulp を触るようになったか、というと
今まで自分の会社ではフロントサイドエンジニアからHTML, CSS, javascript などを納品という形で受け取り、
それをテンプレートエンジンへ変換する(例えばjava でいえばjsp に変換する)という作業の流れだったが、
それだとフロントサイドとサーバーサイドの間に大きな壁ができ、
効率が非常に悪く、良いものができなかったため、
フロントサイドとサーバーサイドが協力して作業をするようにしたためである。

そのためフロントサイドのgulp というタスクランナーの設定なども受け持ったというわけである。

環境

  • windows 10
  • npm 3.7.3
  • node v5.8.0

Gulp のインストール

グローバルインストール

$ npm install -g gulp

サンプルの作成

ここではjavascript を圧縮するタスクランナーを作成する。

まずは適当なディレクトリで

$ npm init

圧縮に必要なgulp-uglify をdevDependencies に追加する。

$ npm install gulp-uglify --save-dev

次にgulpfile.js の作成。

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

gulp.task('uglify',function () {
    return gulp.src(['src/**/*.js'])
        .pipe(uglify()))
        .pipe(gulp.dest('dist/javascript/'));
});

gulp.task('default', ['uglify'], function () {
    // This will only run if the lint task is successful... 
});

簡単に解説すると、require で必要なモジュールを追加し、gulp.task でタスクを定義している。
圧縮のタスクは.pipe(uglify()) になる。

デフォルトタスクに追加しているため、以下コマンドで実行できる。

$ gulp

これでsrc ディレクトリ以下のjs ファイルが圧縮されてdist/javascript 以下に出力される。

本番環境と開発環境の使い分け

本番環境と開発環境で別々にタスクを定義してもよいが、それだと2重管理になる恐れが高い。
共通でタスクを定義し、開発環境では必要ないタスクは除いたりしたほうがよい。
jsファイルの圧縮などはまさしく開発環境では不要なタスクである。

それでは本番環境と開発環境の使い分けをしてみよう。
まずは本番環境と開発環境の使い分けに必要なgulp-if, minimist をdevDependencies に追加する。

$ npm install gulp-if --save-dev
$ npm install minimist --save-dev

これらを使い、先ほどのgulpfile.js を書き換え、開発環境ではjs ファイルの圧縮をしないようにする。

gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');

var minimist = require('minimist');

var options = minimist(process.argv.slice(2), envOption);

var envOption = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'development' } // NODE_ENVに指定がなければ開発モードをデフォルトにする
};

var isProduction = (options.env === 'production') ? true : false;

console.log('[build env]', options.env, '[is production]', isProduction);

gulp.task('uglify',function () {
    return gulp.src(['src/**/*.js'])
        .pipe(gulpif(isProduction, uglify()))
        .pipe(gulp.dest('dist/javascript/'));
});


gulp.task('default', ['uglify'], function () {
    // This will only run if the lint task is successful... 
});

ここでキーとなるのはminimist の使い方である。
minimist はコマンドライン引数を理解し、配列にしてくれる。
例えばこのようなjs に対して

var argv = require('minimist')(process.argv.slice(2));
console.dir(argv);

コマンドライン引数を与えた場合、コンソール出力は以下のようになる。

$ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

ついでにprocess.argv には第一引数にnode が入り、第2引数には実行ファイル名が入る。
第3引数以降にはコマンドライン引数が入るため、minimist に渡す場合はprocess.argv.slice(2) がお決まりとなる。

またminimist は第2引数にオプション(ここではenvOption と定義)を与えることができ、envOption.string に定義した値を取得する。
またコマンドライン引数に該当の値がない場合はenvOption.defaut に定義した値がデフォルト値となる。

それでは実行してみよう。
まずは本番環境の場合

$ gulp --env production
[build env] production [is production] true

次に開発環境の場合

$ gulp --env production
[build env] undefined [is production] false

これで本番環境と開発環境の使い分けができた。

最後に。。。

自分のはてなブログを紹介する。
はてなブログに書いていたが、Qiita に移行してきたので以前のブログを紹介しておきたい。
http://aha-oretama.hatenablog.com/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35