From 91b4fd9a7ac133624ff0534c63376397ef4b116b Mon Sep 17 00:00:00 2001 From: Jan Kuri Date: Sat, 23 Jul 2016 10:49:10 +0200 Subject: [PATCH 1/2] chore(plugin): broccoli pug (jade) plugin --- lib/broccoli/angular-broccoli-pug.js | 55 ++++++++++++++++++++++++++++ lib/broccoli/angular2-app.js | 6 +-- 2 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 lib/broccoli/angular-broccoli-pug.js diff --git a/lib/broccoli/angular-broccoli-pug.js b/lib/broccoli/angular-broccoli-pug.js new file mode 100644 index 000000000000..fda1d06b2a12 --- /dev/null +++ b/lib/broccoli/angular-broccoli-pug.js @@ -0,0 +1,55 @@ +/* jshint node: true, esversion: 6 */ +'use strict'; + +const requireOrNull = require('./require-or-null'); +const Plugin = require('broccoli-caching-writer'); +const fs = require('fs'); +const fse = require('fs-extra'); +const path = require('path'); +const Funnel = require('broccoli-funnel'); + +let pug = requireOrNull('pug'); +if (!pug) { + pug = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/pug`); +} + +class PugPlugin extends Plugin { + constructor(inputNodes, options) { + super(inputNodes, {}); + + options = options || {}; + Plugin.call(this, inputNodes, { + cacheInclude: [/\.pug$|\.jade$/] + }); + this.options = options; + } + + build() { + return Promise.all(this.listEntries().map(e => { + let fileName = path.resolve(e.basePath, e.relativePath); + return this.compile(fileName, this.inputPaths[0], this.outputPath); + })); + } + + compile(fileName, inputPath, outputPath) { + return new Promise(resolve => { + let filePath = fileName.replace(inputPath, outputPath).replace(/\.pug$|\.jade$/, '.html'); + let html = pug.renderFile(fileName, { + pretty: true + }); + fse.outputFileSync(filePath, html, 'utf8'); + resolve(); + }); + } +} + +exports.makeBroccoliTree = (sourceDir, options) => { + if (pug) { + let pugSrcTree = new Funnel(sourceDir, { + include: ['**/*.pug', '**/*.jade'], + allowEmpty: true + }); + + return new PugPlugin([pugSrcTree], options); + } +}; diff --git a/lib/broccoli/angular2-app.js b/lib/broccoli/angular2-app.js index 487b9bbe4771..bf8e567ac605 100644 --- a/lib/broccoli/angular2-app.js +++ b/lib/broccoli/angular2-app.js @@ -127,8 +127,8 @@ class Angular2App extends BroccoliPlugin { var buildTrees = [assetTree, tsTree, indexTree, vendorNpmTree]; - // Add available and supported CSS plugins. - for (const suffix of ['sass', 'less', 'stylus', 'compass']) { + // Add available CSS and HTML template plugins. + for (const suffix of ['sass', 'less', 'stylus', 'compass', 'pug']) { const plugin = require(`./angular-broccoli-${suffix}`); const tree = plugin.makeBroccoliTree(this._inputNode, this._options[`${suffix}Compiler`]); @@ -145,7 +145,7 @@ class Angular2App extends BroccoliPlugin { return n; } })); - } + } var merged = new BroccoliMergeTrees(buildTrees, { overwrite: true }); From 3d0beaec7a5243c54f11b9c184ba11d171ebaade Mon Sep 17 00:00:00 2001 From: Jan Kuri Date: Sat, 23 Jul 2016 10:56:08 +0200 Subject: [PATCH 2/2] docs(readme): Pug (ex Jade) HTML template engine usage --- README.md | 7 +++++++ lib/broccoli/angular-broccoli-pug.js | 1 - 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a91d41328aec..4eae9e984ea4 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ The generated project has dependencies that require * [Linting and formatting code](#linting-and-formatting-code) * [Support for offline applications](#support-for-offline-applications) * [Commands autocompletion](#commands-autocompletion) +* [HTML template engine integration](#html-template-engine-integration) * [CSS preprocessor integration](#css-preprocessor-integration) * [3rd Party Library Installation](#3rd-party-library-installation) * [Updating angular-cli](#updating-angular-cli) @@ -222,6 +223,12 @@ ng completion >> ~/.bash_profile source ~/.bash_profile ``` +### HTML Template Engine integration + +We currently support `Pug` (ex `Jade`) HTML template engine. +To use `Pug` install `npm install pug --save` in your project and rename `.html` template extensions to `.pug`. Templates will be compiled automatically. + +If you already have `pug` installed globally the plugin will be instatinated automatically and the templates will be compiled to HTML. ### CSS Preprocessor integration diff --git a/lib/broccoli/angular-broccoli-pug.js b/lib/broccoli/angular-broccoli-pug.js index fda1d06b2a12..13d72a5f48e8 100644 --- a/lib/broccoli/angular-broccoli-pug.js +++ b/lib/broccoli/angular-broccoli-pug.js @@ -3,7 +3,6 @@ const requireOrNull = require('./require-or-null'); const Plugin = require('broccoli-caching-writer'); -const fs = require('fs'); const fse = require('fs-extra'); const path = require('path'); const Funnel = require('broccoli-funnel');