fix(nunjucks): serve compiled nunjucks from tmp folder and watch duri…

…ng development
fusionstrings · Sep 10, 2015 · 22322c6 · 22322c6
1 parent a5cf7dd
commit 22322c6
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 4 deletions.
diff --git a/app/templates/base.nunjucks b/app/templates/base.nunjucks
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="">
+  <head>
+  {% block head %}
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A starter project for mobile first, modern web apps, which utilises JSPM, SystemJS, Bebel, ES 2015, Karma, Chai, Mocha.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Project Fusion 0.13.6</title>
+
+    <!-- Web Application Manifest -->
+    <link rel="manifest" href="manifest.json">
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Web Starter Kit">
+    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
+    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <meta name="theme-color" content="#3372DF">
+
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+
+    <!-- Page styles -->
+    <link rel="stylesheet" href="styles/style.css">
+      {% block style %}
+
+      {% endblock %}
+    {% endblock %}
+  </head>
+  <body>
+    <header>
+    {% block header %}
+      <h1>Project fusion</h1>
+    {% endblock %}
+    </header>
+
+    <main>
+      {% block main %}
+      {% endblock %}
+    </main>
+    <footer>
+      <p>This project is junction point for various other best in class solutions, rather than a complete innovation-</p>
+      <p>&copy; 2015</p>
+    </footer>
+
+    <!-- build:js(app/) scripts/main.min.js -->
+    <script src="jspm_packages/system.js"></script>
+    <script src="system.config.js"></script>
+
+    <script src="node_modules/html-inspector/html-inspector.js"></script>
+    <script>
+        System.import('scripts/main');
+        HTMLInspector.inspect();
+    </script>
+    <!-- endbuild -->
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+      ga('create', 'UA-XXXXX-X', 'auto');
+      ga('send', 'pageview');
+    </script>
+    <!-- Built with love using Web Starter Kit -->
+  </body>
+</html>
diff --git a/app/templates/index.nunjucks b/app/templates/index.nunjucks
@@ -0,0 +1,27 @@
+      {% extends "templates/base.nunjucks" %}
+      {% block main %}
+      <h2>Hello!</h2>
+      <p>Presenting ambitious, opinionated and yet highly flexible web app starter kit for modular development.</p>
+      <p>It provides following features &mdash;</p>
+      <ul>
+        <li>JSPM package manager</li>
+        <li>Support to ES6/Ecmascript 2015, AMD or common JS using System JS</li>
+        <li>Automatic semver bump based GIT commit message</li>
+        <li>Automatic release notes from GIT commit message</li>
+        <li>TDD / BDD using Karma, Mocha and Chai</li>
+        <li>Automatic styleguide generation</li>
+        <li>Styleguide variables can be chnaged from dashboard</li>
+        <li>External and internal dependency management from NPM, Bower, Github, Bitbucket, Stash or any custom private/public endpoint.</li>
+        <li>CSS as module dependency</li>
+        <li>Linting</li>
+        <li>Code coverage</li>
+      </ul>
+      <h2>Future roadmap (Work in progress)</h2>
+      <ul>
+        <li>CSS regression testing</li>
+        <li>Optimize HTML and CSS using CSS nano and HTML inspector</li>
+        <li>Virtualise / containerise development environment using Vagrant and Docker</li>
+        <li>Completely automate issue management, development, deployment and CI</li>
+        <li>Single click deployment</li>
+      </ul>
+      {% endblock %}
diff --git a/build/tasks/serve.js b/build/tasks/serve.js
@@ -5,7 +5,7 @@ import paths from '../paths';
 const reload = browserSync.reload;
 
 // Watch files for changes & reload
-gulp.task('serve', ['styles', 'styleguide'], () => {
+gulp.task('serve', ['styles', 'styleguide', 'nunjucks'], () => {
   browserSync({
     notify: false,
     // Customize the BrowserSync console logging prefix
@@ -21,7 +21,8 @@ gulp.task('serve', ['styles', 'styleguide'], () => {
     }
   });
 
-  gulp.watch([paths.templates], reload);
+  gulp.watch([paths.templates], ['templates', reload]);
+  //gulp.watch([paths.templatesNunjucks], ['nunjucks', reload]);
   //gulp.watch(['./app/**/*.md'], ['styleguide', reload]);
   gulp.watch(paths.styles, ['styles', 'styleguide', reload]);
   gulp.watch([paths.scripts], ['eslint', 'test']);

diff --git a/build/tasks/templates.js b/build/tasks/templates.js
@@ -3,12 +3,29 @@ import gulpLoadPlugins from 'gulp-load-plugins';
 import paths from '../paths';
 const $ = gulpLoadPlugins();
 
+/*
+gulp.task('nunjucks', () => {
+    $.nunjucksRender.nunjucks.configure([paths.root], { watch: false });
+    return gulp.src(paths.templatesNunjucks)
+        .pipe($.nunjucksRender())
+        .pipe(gulp.dest(paths.tmp));
+});
+
+gulp.task('nunjucks:dist', () => {
+    $.nunjucksRender.nunjucks.configure([paths.root], { watch: false });
+    return gulp.src(paths.templatesNunjucks)
+        .pipe($.nunjucksRender())
+        .pipe(gulp.dest(paths.output));
+});
+*/
+
 // Scan your HTML for assets & optimize them
 gulp.task('templates', () => {
-  const assets = $.useref.assets({searchPath: '{' + paths.root + ',' + paths.tmp + '}'});
+  const assets = $.useref.assets({ searchPath: `{ ${paths.root}, ${paths.tmp }` });
   $.nunjucksRender.nunjucks.configure([paths.root], { watch: false }); //gulp-nunjucks-render
   return gulp.src(paths.templates)
     .pipe($.if('*.nunjucks', $.nunjucksRender()))
+    .pipe(gulp.dest(paths.tmp))
 
     .pipe(assets)
 
@@ -32,6 +49,6 @@ gulp.task('templates', () => {
     // Minify any HTML
     .pipe($.if('*.html', $.minifyHtml()))
     // Output files
-    .pipe(gulp.dest('dist'))
+    .pipe(gulp.dest(paths.output))
     .pipe($.size({title: 'html'}));
 });