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

     - プログラム言語 , ,  


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

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

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

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

[code lang=”bash”]
gulp compress –ENV production
[/code]

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

必要なnpmモジュール

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

コード

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

config.json

[code lang=”js”]
{
"development" : {
"host" : "dev.example.com"
},

"production" : {
"host" : "prod.example.com"
}
}
[/code]

source.js

[code lang=”js”]

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

[/code]

gulpfile.js

[code lang=”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’]);
[/code]

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


DACエンジニア採用情報

  関連記事

TypeScriptについてまとめてみた

はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何? TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …

【未経験からのRuby on Rails – 第4回】Railsアプリケーション開発をしよう! 〜開発の準備編〜

こんにちは。新卒のmatsuariです。 Rubyについてまだまだ知るべきことはたくさんありますが、とにかく早くアプリを作りたい! ということで、今回はアプリ開発の準備に取り掛かっていきます。 Rubyはアプリを作成しながら、同時に学んでいきたいと思います。 Railsアプリケーション開発の準備《 …

GoogleスプレッドシートからTreasureDataへデータを取り込む

AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …

初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

no image
Polymer on Rails

Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。) 簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。 Custom Elements, 説明 …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

【小ネタ】JSで要素の組み合わせを列挙する

下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …

【未経験からのRuby on Rails – 第3回】変数と定数

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

SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

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

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