node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

gulp-pug-template-underscore

gulp-pug-template-underscore

logo

Build Status

Overview

指定のディレクトリ配下にあるpugファイルをcompileして、指定のjsファイル内の /.template\('.*?'\)/g に該当する要素の場合、replaceする。

このことにより、htmlファイル内に <script type="text/template"></script> のような記述がなくなり、htmlファイルの見通しがよくなること、かつpugファイルの再利用性や、共通性を高められるのでは、という狙い。

Sample Project

Sample gulpfile.js

var gulp = require('gulp');
var ptu = require('gulp-pug-template-underscore');
 
var srcPath = 'src/javascripts/**/*.js';
var destPath = 'dest/javascripts';
 
gulp.task('default',function(){
  gulp.src(srcPath)
  .pipe(ptu({
    templateDirPath: 'src/pug/templates',
    prefix: '',
    pathSplit: '.',
    extension: false,
  }))
  .pipe(gulp.dest(destPath));
});

options.prefix

gulpfile.js

var gulp = require('gulp');
var ptu = require('gulp-pug-template-underscore');
 
var templateDirPath = 'src/pug/templates';
var srcPath = 'src/javascripts/**/*.js';
var destPath = 'dest/javascripts';
 
gulp.task('default',function(){
  gulp.src(srcPath)
  .pipe(ptu({
    templateDirPath: templateDirPath,
    prefix: 'ptu-'
  }))
  .pipe(gulp.dest(destPath));
});

sample.js

// not replace target 
_.template($('#foo').html())
_.template('<li><%= title %></li>')
 
// replace target 
_.template('ptu-foo') // replace with compiled foo.pug  

options.pathSplit

var gulp = require('gulp');
var ptu = require('gulp-pug-template-underscore');
 
var templateDirPath = 'src/pug/templates';
var srcPath = 'src/javascripts/**/*.js';
var destPath = 'dest/javascripts';
 
gulp.task('default',function(){
  gulp.src(srcPath)
  .pipe(ptu({
    templateDirPath: templateDirPath,
    pathSplit: '/',
  }))
  .pipe(gulp.dest(destPath));
});

sample.js

// replace target 
_.template('nest/foo') // replace with compiled nest/foo.pug  

options.extension

var gulp = require('gulp');
var ptu = require('gulp-pug-template-underscore');
 
var templateDirPath = 'src/pug/templates';
var srcPath = 'src/javascripts/**/*.js';
var destPath = 'dest/javascripts';
 
gulp.task('default',function(){
  gulp.src(srcPath)
  .pipe(ptu({
    templateDirPath: templateDirPath,
    extension: true,
  }))
  .pipe(gulp.dest(destPath));
});

sample.js

// replace target 
_.template('foo.pug') // replace with compiled nest/foo.pug  

options example

var gulp = require('gulp');
var ptu = require('gulp-pug-template-underscore');
 
var templateDirPath = 'src/pug/templates';
var srcPath = 'src/javascripts/**/*.js';
var destPath = 'dest/javascripts';
 
gulp.task('default',function(){
  gulp.src(srcPath)
  .pipe(ptu({
    templateDirPath: 'src/pug/templates',
    prefix: '',
    pathSplit: '/',
    extension: true,
  }))
  .pipe(gulp.dest(destPath));
});

sample.js

// replace target 
_.template('nest/foo.pug') // replace with compiled nest/foo.pug