2016/03/22更新

[フロントエンド] 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・機械学習を中心に発信していきます。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。