gulp.jsで広告タグの開発環境を整える

     - プログラム言語 , ,  


SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、
コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、
これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。

※gulpの基本的な使い方については下記などを参照下さい。
はじめてのgulp

さて、広告タグやトラッキングタグなど外部サイトに配布するタグの開発をしていると、
開発環境/商用環境で定数を出し分けたい場合が多々あります。
APIのendpointを分けたい…といったような状況です。

minify自体は難読化ツールuglify.jsのgulpプラグインで可能ですが、
単純に圧縮してしまうと環境別のコンパイルが出来ません。
下記の様にコマンドラインで環境を指定して条件付けが出来ると、
Jenkinsと連携して環境別にジョブを登録する場合などに便利かなと思い、やってみました。

gulp compress --ENV production

のような形式で環境に合わせたコンパイルが出来るようになります。

必要なnpmモジュール

  • gulp //タスクランナー
  • gulp-uglify //難読化ツールuglify.jsのgulpプラグイン
  • gulp-rename(任意) //gulpでファイルをリネームするプラグイン
  • minimist //コマンドライン引数のparser

コード

JSON形式のコンフィグを用意します。

config.json

{
    "development" : {
        "host" : "dev.example.com"
    },

    "production" : {
        "host" : "prod.example.com"
    }
}

source.js

…
//圧縮したいファイル。このhostをコンパイル時に環境に応じて書き換えたいとする
var host = __HOST__;
…

gulpfile.js

'use strict'
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    minimist = require('minimist'),
    config = require('./config.json');

// minimistでコマンドライン引数をパース
var args = minimist(process.argv.slice(2)),
// 変数envに、CLI引数のENVに応じたconfig.jsonのオブジェクトを格納
    env = config[args.ENV];

// uglifyの引数に取るオブジェクト。compress.global_defsのプロパティに
// { 圧縮前ファイルの定数名 : 圧縮後のリテラル } を指定。 
var compileCondition = {
    compress: {
        global_defs: {
            //ここでは、__HOST__をconfig.jsonのhostで書き換えます。
            __HOST__: env.host
        }
    }
};

function compress(condition) {
    gulp.src('./source.js')
        .pipe(uglify(condition))
        .pipe(rename('source.min.js'))
        .pipe(gulp.dest('./'));
}

gulp.task('compress', function() {
    compress(compileCondition);
});

// とりあえずdefaultも定義
gulp.task('default', ['compress']);

下記のGulp.jsあるあるレシピを参考にしました。わかりやすかったのでオススメです!
GitHub / gulp Recipes


DACエンジニア採用情報

  関連記事

shogi
ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …

no image
【未経験からのRuby on Rails – 第1回】楽しく書けるプログラミング言語 “Ruby” とは

こんにちは、はじめまして。新卒1年目のmatsuari(女子)です。 この度、Rubyの勉強を始めることになりまして、 まずはたくさんあるプログラミング言語の中で、なぜ自分がRubyを学ぶのか? しっかりと把握した上で学習に取り組んでいきたいと考え、『Rubyとは何か?』調べました。 超基礎的なこと …

swift
iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

スクリーンショット 2015-07-31 16.38.02
【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …

tf
ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …

no image
Polymer core-ajax の使い方

Polymerのcore-ajaxの使い方。 まずは、index.html my-topicsというCustom Elementに実際の処理を書く。JSONで、とあるサーバからデータを取得する、という想定。本当はJSONPで取りたかったんだけど、それは次回までの課題で… core-aja …

no image
【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 使い方はconsoleと同じようにlogger.log,logger.grou …

index
Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

スクリーンショット 2015-07-31 16.41.25
【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …

chain
PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …