gulp-ejs使用時に拡張子を変更してdestする方法

Tips

gulp-ejs使用時に拡張子を変更してdestする方法

EJSをgulpで使用してdestさせる際、単純に.pipe(ejs())だと拡張子が.ejsのままになってしまうので、それを任意の拡張子に変更してdestさせる方法です。

※以下で紹介する方法はgulpとgulp-ejsを使用して実装する方法になりますので、予めそれらが使用できる環境を用意してください。

まず、単純にgulp.src()で指定されたファイルをgulp.dest()に出力しその間でejsの処理を行う場合は下記のようなタスクになると思います。

gulpfile.js

var gulp = require( 'gulp' ),
    ejs = require( 'gulp-ejs' );

gulp.task('ejs', function() {
  return gulp.src(paths.src)
      .pipe(ejs())
      .pipe(gulp.dest(paths.dest));
});

この状態で$ gulp ejsを実行すると、ファイルのdest自体はされるのですが拡張子がすべて.ejsのままになります。
これはタスクの.pipe(ejs())の部分に下記のような形でオプションを指定することで指定した拡張子でdestさせることができます。

gulpfile.js

var gulp = require( 'gulp' ),
    ejs = require( 'gulp-ejs' );

gulp.task('ejs', function() {
  return gulp.src(paths.src)
      .pipe(ejs({}, {}, {ext: '.html'}))
      .pipe(gulp.dest(paths.dest));
});

このコードの場合は.htmlの拡張子を指定しているので、再度$ gulp ejsを実行すれば.ejsだった各ファイルの拡張子が.htmlとなってdestされるのを確認できます。
他の拡張子にしたい場合は、例えばext: '.html'となっている箇所をext: '.php'にすれば拡張子が.phpとなってdestされるようになります。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.