Gulpを使って「特定のファイル内に書かれている文字列を置換（削除）」する機会がありました。

具体的にどういう時に使ったのかというと・・・AMP（Accelerated Mobile Pages Project）対応のページをオリジナルデザインにする際にインラインでCSSを適用することがあるのですが、文字エンコーディングの指定（「@charset “UTF-8”;」など）の記述があると以下のようなエラーが出ます。

CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@charset'.

Sassを使ってCSSをコンパイルすると、この文字エンコーディングの指定が自動で書かれてしまいます。(書かれない方法もあるかもしれないけど、調べましたがいいやり方が見つけられませんでした;;)

というわけで、毎度コンパイルするたびに文字エンコーディングの指定を削除しなくちゃいけない、ってのは効率的じゃないな、と思ったので「自動で削除してしまおう」と思いました。

そこでGulpプラグイン「gulp-replace」を使えば、特定のファイル内に書かれている文字列を置換（削除）ができますので、便利でした。

以下にインストールや使い方などの流れを書きましたので、機会がありましたらご参考ください。

Gulpプラグインをインストール

まずはコマンドプロンプト（ターミナル）を起動して、Gulpがインストールされているフォルダ（以降 作業フォルダ）まで移動して、以下のコマンドを実行します。

npm install --save-dev gulp-replace

gulp-replaceを読み込もう

次に、作業フォルダ内にgulpfile.jsファイルを作成してテキストエディターで開いて、gulpとgulp-replaceを読み込みます。

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

置換したいファイルを用意しよう

次に、置換したいファイルを用意します。今回は「style.css」ファイルを例とします。

style.css

@charset "UTF-8";h1,header .meta{margin:.5rem}#related h3{margin:0 0 .5rem}.entry-content{font-size:.95rem}...（以下省略）

「@charset “UTF-8”;」という文字列が入っていることがポイントです。

タスクを書こう

次に、「gulpfile.js」ファイルに文字列を置換（削除）するためのタスクを書きます。

//文字列の置換（削除）
gulp.task('replace', function(){ //「replace」のタスク内容を書こう
 gulp.src( ['style.css'] ) //「style.css」ファイルを指定
 .pipe( replace(/@charset "UTF-8";/g, '') ) //正規表現で「@charset "UTF-8";」という文字列を空文字に置換（つまり削除している）
 .pipe( gulp.dest( 'build/style.css' ) ); //「build」配下に「style.css」ファイルを作成
});

タスクを動かそう

タスクを書いたら、コマンドプロンプト（またはターミナル）を起動して、以下のコマンドを実行します。

gulp replace

うまくいくと、「@charset “UTF-8”;」という文字列が置換（削除）されます。

まとめ

Gulpを使って「特定のファイル内に書かれている文字列の置換や削除をしたい」という場合はご参考いただけますと嬉しいです。その他、オプションなど詳細は「gulp-replace」をご参考ください。