UNPKG

twig-compile

Version:

compile twigjs to AMD with dependencies

159 lines (144 loc) 6 kB
### Example of output file src/Rt/Bundle/AppBundle/Resources/frontend/views/_/index.twig ```twig <header class="header"> </header> <main class="content" id="main"> <section class="search-product"> {% include 'block/index/search-product.twig' %} </section> <section class="offers"> {% include 'block/index/offers.twig' %} </section> <section class="prices"> {% include 'block/index/price.twig' %} </section> <section class="stores"> </section> <section class="selection"> {% include 'block/index/selection.twig' %} </section> <section class="size-section"> {% include 'block/index/size-section.twig' %} </section> </main> <footer id="footer"> </footer> ``` compilation result: web/dependencies/js/views/_/index.twig.js ```javascript define(["twig", "views/block/index/search-product.twig", "views/block/index/offers.twig", "views/block/index/price.twig", "views/block/index/selection.twig", "views/block/index/size-section.twig"], function (Twig) { var twig = Twig.twig, template; var currentTwigVersion = Twig.VERSION.split('.'); var checkVersion = function (mj, mi, fx, supress) { if (supress) { return currentTwigVersion[0] == mj && currentTwigVersion[1] == mi && currentTwigVersion[2] == fx; } if (currentTwigVersion[0] != mj) { console.error("Twig has another version") } else { if (currentTwigVersion[1] != mi) { console.warn("Twig has another version") } else { if (currentTwigVersion[2] != fx) { console.log("Twig has another version") return false; } else { return true; } } } }; checkVersion(0,8,2); var autoGeneratedData = {id:"_/index.twig", allowInlineIncludes: true, data:[{"type":"raw","value":"<header class=\"header\">\n</header>\n<main class=\"content\" id=\"main\">\n <section class=\"search-product\">\n "},{"type":"logic","token":{"type":"Twig.logic.type.include","only":false,"includeMissing":false,"stack":[{"type":"Twig.expression.type.string","value":"block/index/search-product.twig"}]}},{"type":"raw","value":" </section>\n <section class=\"offers\">\n "},{"type":"logic","token":{"type":"Twig.logic.type.include","only":false,"includeMissing":false,"stack":[{"type":"Twig.expression.type.string","value":"block/index/offers.twig"}]}},{"type":"raw","value":" </section>\n <section class=\"prices\">\n "},{"type":"logic","token":{"type":"Twig.logic.type.include","only":false,"includeMissing":false,"stack":[{"type":"Twig.expression.type.string","value":"block/index/price.twig"}]}},{"type":"raw","value":" </section>\n <section class=\"stores\">\n </section>\n <section class=\"selection\">\n "},{"type":"logic","token":{"type":"Twig.logic.type.include","only":false,"includeMissing":false,"stack":[{"type":"Twig.expression.type.string","value":"block/index/selection.twig"}]}},{"type":"raw","value":" </section>\n <section class=\"size-section\">\n "},{"type":"logic","token":{"type":"Twig.logic.type.include","only":false,"includeMissing":false,"stack":[{"type":"Twig.expression.type.string","value":"block/index/size-section.twig"}]}},{"type":"raw","value":" </section>\n</main>\n<footer id=\"footer\">\n</footer>"}], precompiled: true}; template = twig(autoGeneratedData); template._autoGeneratedData = autoGeneratedData;//in case You want pass some options return template; }); ``` ### Parts of gulp file ```javascript var config = { ENV: env, dependencies: { //.... views: { path: './src/Rt/Bundle/AppBundle/Resources/frontend/views',//where placed twig files extensions: [ 'twig' ],//extension options: { module: 'amd',//for future improvements twig: 'twig', compileOptions: { viewPrefix: 'views/'//directory, where will be placed compiled templates } } } //.... } DEST_PATH: './web/dependencies' }; ```` ```javascript 'use strict'; var gulp = require('gulp') , _ = require('lodash') , bower = require('main-bower-files') , bowerNormalizer = require('gulp-bower-normalize') , rename = require('gulp-rename') , install = require('gulp-install') , watch = require('gulp-watch') , babel = require('gulp-babel') , uglify = require('gulp-uglify') , gutil = require('gulp-util') , gulpif = require('gulp-if') , rjs = require('gulp-requirejs-optimize') , twig_compile = require('./twig-compile') , shell = require('gulp-shell') , sourcemaps = require('gulp-sourcemaps') , sass = require('gulp-sass') , autoprefixer = require('gulp-autoprefixer') , cmq = require('gulp-merge-media-queries') , progeny = require('gulp-progeny') , minifyCss = require('gulp-minify-css') , browserSync = require('browser-sync'); //......... var logger = function (prefix) { return require('gulp-print')(function (filepath) { return prefix + ': ' + filepath; }); }; //......... (function (handle) { var conf = config.dependencies.views, paths = [ conf.path + '/**/*.twig' ]; conf.options.compileOptions.lookPaths = [ conf.path ]; var ENV_VAR = '_GULP_DEP_VIEW_BUILD'; gulp.task('dependencies:views:watch', [ 'dependencies:views:build' ], function () { return watch(paths, function (file) { // twigjs bug :( var env = {}; env[ ENV_VAR ] = file.path; return gulp.src([ file.path ], {read: false}) .pipe(shell([ 'node_modules/.bin/gulp dependencies:views:build' ], { quiet: true, env: env, cwd: __dirname })) .pipe(logger('views')); }); }); gulp.task('dependencies:views:build', function () { return handle(conf, process.env[ ENV_VAR ] || paths); }); })(function (conf, paths) { return gulp.src(paths) .pipe(twig_compile(conf.options)) .on('error', function () { //notify console.error(arguments); }) .pipe(logger('views')) .pipe(gulp.dest(config.DEST_PATH + '/js/' + conf.options.compileOptions.viewPrefix)); }); ```