-Adding Grunt dependencies to run the PL Twig engine as well

-Fixing Grunt watch task to watch all file deps inside of the _patterns folder vs just mustache and json files
-Cleaning up missing Gulp dependencies, Twig Media object example

Author: Ghoweri, Salem (BOS-GEN)

Gruntfile.js

@@ -80,8 +80,8 @@ module.exports = function(grunt) {
 				files: [
 					path.resolve(paths().source.css + '**/*.css'),
 					path.resolve(paths().source.styleguide + 'css/*.css'),
-					path.resolve(paths().source.patterns + '**/*.mustache'),
-					path.resolve(paths().source.patterns + '**/*.json'),
+					path.resolve(paths().source.patterns + '**/*'),
+					// path.resolve(paths().source.patterns + '**/*.json'),
 					path.resolve(paths().source.fonts + '/*'),
 					path.resolve(paths().source.images + '/*'),
 					path.resolve(paths().source.data + '*.json')

builder/pattern_engines/engine_twig.js

@@ -34,7 +34,7 @@
 
     // regexes, stored here so they're only compiled once
     findPartialsRE: /{%([ ]+)?(?:extends|include|embed)(\s\S)(.*)%}/g,
-    findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g,
+    findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // TODO
 
     // render it
     renderPattern: function renderPattern(template, data) {
@@ -70,7 +70,8 @@
     // return it.
     findPartialKey: function(partialString) {
 
-      // var partialKey = partialString.replace(this.findPartialsRE, '$1');
+
+      //var partialKey = partialString.replace(this.findPartialsRE, '$1');
       var partialKey = partialString.match(/"((?:\\.|[^"\\])*)"/)[0];
       partialKey = partialKey.replace(/"/g, '');
 

package.gulp.json

@@ -9,7 +9,10 @@
     "fs-extra": "^0.26.5",
     "glob": "^7.0.0",
     "html-entities": "^1.2.0",
-    "mustache": "^2.2.1"
+    "mustache": "^2.2.1",
+    "handlebars": "^4.0.5",
+    "twig": "^0.8.8",
+    "underscore": "^1.8.3",
   },
   "devDependencies": {
     "browser-sync": "^2.11.1",

package.json

@@ -11,7 +11,8 @@
     "matchdep": "^1.0.0",
     "mustache": "^2.2.0",
     "handlebars": "^4.0.5",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "twig": "^0.8.8"
   },
   "devDependencies": {
     "bs-html-injector": "^3.0.0",

source/_patterns/01-molecules/media-object.twig

@@ -15,7 +15,17 @@
 </style>
 
 
+{% set foo = "world!" %}
+
+
 <div class="Media">
   {% include "atoms-image" %}
-  <p class="Media-body">Media Object body text</p>
+
+  <div class="Media-body">
+
+    {# Testing if we can also pull in non-twig templates without breaking anything (it works!). Good idea though? Eh... #}
+    {% include "atoms-paragraph" %}
+
+    <p>Oh, hello {{ foo }}</p>
+  </div>
 </div>