[フロントエンド] Gulpで文字列置換を行う

こんにちは、@yoheiMuneです。
今日はライトなネタですが、Gulpで文字列置換を行う方法をブログに残したいと思います。

目次

Gulpとは

Gulpとは、grunt.jsと同様にフロントエンドのビルドツールです。JavaScriptでタスクを定義することができ、JSの結合や圧縮、CSSのプリプロセッサ/ポストプロセッサの実行など様々なことを行うことができます。具体的には、[フロントエンド] nodeモジュール管理がフロントで使えるBrowserifyに入門に書きましたのでそちらもご覧いただけたら幸いです。

Gulpで文字列置換を行う

Gulpで文字列の置換を行う場合には、gulp-replaceモジュールを用いることで簡単に実現することができます。具体的には以下のように利用します。

まずはモジュールをインストールします。

$ npm install --save-dev gulp-replace

次に、gulpfile.jsで以下のように実装します。

// gulpfile.js
var gulp = require('gulp');
var replace = require('gulp-replace');

// Replace HostName.
gulp.task('replaceHostName', function () {
    return gulp
            .src(['./static/js/*'])
            .pipe(replace('http://localhost', '//some.production-domain.com'))
            .pipe(gulp.dest('./static/js/'));
});

そして、Gulpを実行します。

$ gulp replaceHostName

これで./static/js/ディレクトリ直下のファイルに記述されているホスト名を本番用に書き直すことができます。

ちなみに、以下のように正規表現でも利用することができるようです。

// 正規表現でも文字列置換ができる
gulp.task('templates', function(){
  gulp.src(['file.txt'])
    .pipe(replace(/foo(.{3})/g, '$1foo'))
    .pipe(gulp.dest('build/file.txt'));
});

参考資料

以下のドキュメントを参照しました。ありがとうございます。

https://www.npmjs.com/package/gulp-replace

最後に

今日はGulpで文字列置換を行う方法をブログに書きました。便利なパッケージがあるので楽チンですね♪ Gulpについてはこれからもちょくちょくと使った技術についてはブログに書き残していきたいと思います。

本ブログでは、フロントエンド・Python・機械学習を中心に発信していきます。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！