gulp-jst2

gulp-jst2
=========

Compile lodash templates to a JST file using gulp; allow customisation of the prepended text while optionally using a RegEx of the file.path (full path, name and extension).

Based on gulp-jst.

Install
-------

Install using npm.

``
npm install gulp-jst2 --save-dev
`

Options
-------

$3

prepend string to prepend before the function returned. Will be used in printf so can include %s to insert the string returned from the useFilePath option. Default: false.

useFilePath array containing [RegEx, string] to return all or part of the current file's path. Default returns filename without extension. Default: ['^./(.+?)(\.[^.]$|$)', '$1']

gulp-jst2 also accepts the same _.template options and passes them on to the lodash library.


Usage
-----

Defaults will simply return the lodash function:
`js
var gulp = require('gulp'),
jst = require('gulp-jst2');


gulp.task('jst', function() {

gulp.src('input/*.ejs')
.pipe(jst())
.pipe(gulp.dest('./output'));

});


gulp.task('default', ['jst']);
`

You can prepend a simple string before the function to produce a variable assignment like so:
`js
var gulp = require('gulp'),
jst = require('gulp-jst2');


gulp.task('jst', function() {

gulp.src('input/*.ejs')
.pipe(jst({ prepend: 'var mySuperDuperApp["template"] = ' }))
.pipe(gulp.dest('./output'));

});


gulp.task('default', ['jst']);
`

You can prepend with the %s option to include the default filename of the current file within your string before the function to produce a variable assignment like so:
`js
var gulp = require('gulp'),
jst = require('gulp-jst2');


gulp.task('jst', function() {

gulp.src('input/*.ejs')
.pipe(jst({ prepend: 'var mySuperDuperApp["templates"]["%s"] = ' }))
.pipe(gulp.dest('./output'));
});


gulp.task('default', ['jst']);
`

You can prepend with the %s option to include the RegEx of the file.path of the current file within your string before the function to produce a variable assignment like so:
`js
var gulp = require('gulp'),
jst = require('gulp-jst2');


gulp.task('jst', function() {

gulp.src('input/*.ejs')
.pipe(jst({
prepend: 'var mySuperDuperApp["templates"]["%s"] = ',
useFilePath: ['.*', '$&']
}))
.pipe(gulp.dest('./output'));
});


gulp.task('default', ['jst']);
`


Really Useful Usage
-------------------

Create a single javaScript file containing a custom global object with a key templates whose subkeys are the filename of templates from a single directory and their values are the templates. Also minify the HTML and uglify the javaScript, like so:

`js

var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'),
jst = require('gulp-jst2'),
concat = require('gulp-concat'),
insert = require('gulp-insert'),
uglify = require('gulp-uglify');


gulp.task('jst', function() {

gulp.src(['./templates/*.ejs'])

// Minify the HTML prior to converting to JST
.pipe(htmlmin({ collapseWhitespace: true, removeComments: true, removeCommentsFromCDATA: true }))

// Convert to JST and assign to app.templates which we'll define once all files are concatenated in
.pipe(jst({ prepend: 'app.templates["%s"] = ' }))

// Concatenate all files together and insert a comma before each newLine
.pipe(concat('jst.js', { newLine: ',\n' }))

// Insert the start of an IIFE and variable declarations at the beginning of the file
.pipe(insert.prepend('var mySuperDuperApp = (function(app) {\n app.templates = app.templates || {};\n\n'))

// Insert the end of an IIFE and return the object at the end of the file (also the last function from the jst call will not end with a semicolon, so add one here)
.pipe(insert.append(';\n\n return app;\n})(mySuperDuperApp || {});\n'))

// Uglify the JS
.pipe(uglify( { mangle: true, reserved: "mySuperDuperApp" } ))

.pipe(gulp.dest('./views/public/j'));

});


gulp.task('default', ['jst']);

``