updated requirements and added gulp-data to pass json objects to numnucks teamplates

Author: sageworksstudio

.gitignore

@@ -1,3 +1,3 @@
 node_modules
-dest
+dist
 package-lock.json

README.md

@@ -1,6 +1,6 @@
-![](https://img.shields.io/github/release/digi-brains/StreamBuilder.svg?style=flat-square)
-![](https://img.shields.io/github/license/digi-brains/StreamBuilder.svg?style=flat-square)
-![](https://img.shields.io/github/issues/digi-brains/StreamBuilder.svg?style=flat-square)
+![](https://img.shields.io/github/release/sageworksstudio/StreamBuilder.svg?style=flat-square)
+![](https://img.shields.io/github/license/sageworksstudio/StreamBuilder.svg?style=flat-square)
+![](https://img.shields.io/github/issues/sageworksstudio/StreamBuilder.svg?style=flat-square)
 
 # StreamBuilder
 
@@ -9,12 +9,12 @@ StreamBuilder is an automated build environment well suited for HTML, CSS and Ja
 
 ## What it does
 
-By working in the `/src` directory all of your changes are piped and rendered to the `/dest` folder.
+By working in the `/src` directory all of your changes are piped and rendered to the `/dist` folder.
 
-- `/src/scss` -> `/dest/css`
-- `/src/js` -> `/dest/js`
-- `/src/pages` -> `/dest/`
-- `/src/img` -> `/dest/img`
+- `/src/scss` -> `/dist/css`
+- `/src/js` -> `/dist/js`
+- `/src/pages` -> `/dist/`
+- `/src/img` -> `/dist/img`
 - It even refreshes your browser on every change!
 
-[Documentation](https://digi-brains.github.io/StreamBuilder/)
+[Documentation](https://sageworksstudio.github.io/StreamBuilder/)

docs/index.html

@@ -25,13 +25,13 @@ <h2>What it is</h2>
 
         <h2>What it does</h2>
 
-        By working in the <code>/src</code> directory all of your changes are piped and rendered to the <code>/dest</code> folder.
+        By working in the <code>/src</code> directory all of your changes are piped and rendered to the <code>/dist</code> folder.
 
 <pre>
-    /src/scss -> /dest/css
-    /src/js -> /dest/js
-    /src/pages -> /dest/
-    /src/img -> /dest/img
+    /src/scss -> /dist/css
+    /src/js -> /dist/js
+    /src/pages -> /dist/
+    /src/img -> /dist/img
 </pre>
         <p>
             It even refreshes your browser on every change!
@@ -44,11 +44,11 @@ <h2>Requirements</h2>
         <h2>Getting Started</h2>
 
         <ol>
-            <li>Download this repo to your development environment.</li>
-            <li>Install the node modules listed in the package.json file globally. I.e., <code>sudo npm install -g [node_module]</code>
+            <li>Download or clone this repo to your development environment.</li>
             <li>From a terminal <code>cd path/to/streambuilder</code></li>
-            <li>Run <code>npm install</code> This will create a new directory "node_modules" where NPM will install all the required node modules.</li>
-            <li>Edit the paths variable in the <code>gulpfile.js</code> file to reflect your <code>src</code> and <code>dest</code> paths as well as your application URL.</li>
+            <li>Install the node modules listed in the package.json file. <code>sudo npm install [node_module]</code></li>
+            <li>Note: you might want to install gulp as a global application <code>sudo npm install -g gulp</code> for Gulp to be visible in your command line.</li>
+            <li>Edit the paths variable in the <code>gulpfile.js</code> file to reflect your <code>src</code> and <code>dist</code> paths as well as your application URL.</li>
             <li>Run <code>gulp</code></li>
         </ol>
 
@@ -61,7 +61,7 @@ <h2>Production mode</h2>
 
         <h2>Advanced configuration</h2>
         <p>
-            You can change anything and everything about StreamBuilder by editing the gulpfile.js. By default StreamBuilder compiles everything to the /dest folder. You can chage this behavior (as well as the URL of the project) by editing the <code>paths</code> vars in the top of gulpfile.js.
+            You can change anything and everything about StreamBuilder by editing the gulpfile.js. By default StreamBuilder compiles everything to the /dist folder. You can chage this behavior (as well as the URL of the project) by editing the <code>paths</code> vars in the top of gulpfile.js.
         </p>
         <p>
             StreamBuilder comes bundled with SASS and Nunjucks support. You can change this by removing the gulp-scss modules and installing the css pre-processor and template language of your choice then editing the tasks in gulpfile.js. You can find additional modules at <a href="https://www.npmjs.com/">NPM</a>.
@@ -87,7 +87,7 @@ <h3>Goodies</h3>
         <h4>Getting Help</h4>
 
         <p>
-            If you find a bug or want to see a feature, file it in the <a href="https://github.com/digi-brains/StreamBuilder/issues">issues section</a>.
+            If you find a bug or want to see a feature, file it in the <a href="https://github.com/sageworksstudio/StreamBuilder/issues">issues section</a>.
         </p>
     </body>
 </html>

gulpfile.js

@@ -5,24 +5,27 @@
 const paths = {
         styles: {
             watch   : 'src/scss/**/*.scss',
-            dest    : 'dest/css/'
+            dist    : 'dist/css/'
         },
         scripts: {
             watch   : 'src/js/**/*.js',
-            dest    : 'dest/js/'
+            dist    : 'dist/js/'
         },
         pages: {
             watch   : 'src/pages/**/**/*.njk',  // files to watch (include all partials)
             compile : 'src/pages/templates',    // template used to compile with
             render  : 'src/pages/*njk',         // pages to render (don't render partials)
-            dest    : 'dest/'
+            dist    : 'dist/'
         },
         images: {
             watch   : 'src/img/**/*',
-            dest    : 'dest/img/'
+            dist    : 'dist/img/'
+        },
+        data: {
+            src     : 'src/data/data.json'
         },
         url: {
-            dev     : 'http://streambuilder/dest'
+            dev     : 'http://streambuilder/dist'
         }
     };
 
@@ -45,6 +48,8 @@ const beeper      = require('beeper');
 const browserSync = require('browser-sync').create ();
 const changed     = require('gulp-changed');
 const colors      = require('ansi-colors');
+const data        = require('gulp-data');
+const fse         = require('fs-extra');
 const gulp        = require('gulp');
 const log         = require('fancy-log');
 const njkRend     = require('gulp-nunjucks-render');
@@ -75,7 +80,7 @@ function onError(err) {
     beeper(2);
 };
 
-// Create a new proxy server to view dest.
+// Create a new proxy server to view dist.
 function server() {
     browserSync.init ({
        proxy  : paths.url.dev,
@@ -102,7 +107,7 @@ function style(env) {
             flexbox: true
         }))
         .pipe(sourcemaps.write('./')) //maps are set relative to source
-        .pipe(gulp.dest(paths.styles.dest))
+        .pipe(gulp.dest(paths.styles.dist))
         .pipe(browserSync.stream());
     } else {
         return gulp.src(paths.styles.watch)
@@ -112,48 +117,48 @@ function style(env) {
             outputStyle: 'compressed'
         }))
         .pipe(sourcemaps.write('./')) //maps are set relative to source
-        .pipe(gulp.dest(paths.styles.dest));
+        .pipe(gulp.dest(paths.styles.dist));
     }
 }
 
-// Save JavaScript to dest and reload browser.
+// Save JavaScript to dist and reload browser.
 // 'production' task will uglify final JavaScript output.
 function script(env) {
     if (env !== true) {
         return gulp.src(paths.scripts.watch)
         .pipe(plumber({
               errorHandler : onError
           }))
-        .pipe(gulp.dest(paths.scripts.dest))
+        .pipe(gulp.dest(paths.scripts.dist))
         .pipe(browserSync.stream());
     } else {
         return gulp.src(paths.scripts.watch)
         .pipe(uglify())
-        .pipe(gulp.dest(paths.scripts.dest));
+        .pipe(gulp.dest(paths.scripts.dist));
     }
 }
 
 // Compile HTML on nunjuck change and reload proxy server.
 function page() {
     return gulp.src(paths.pages.render)
-    // .pipe(data(function(file){
-    //     return JSON.parse(fse.readFileSync('./src/data/data.json'))
-    // } ) )
+    .pipe(data(function(file){
+        return JSON.parse(fse.readFileSync('./src/data/data.json'))
+    }))
     .pipe(njkRend({
         path:[paths.pages.compile]
     }))
     .pipe(plumber ({
         errorHandler : onError
     }))
-    .pipe(gulp.dest(paths.pages.dest))
+    .pipe(gulp.dest(paths.pages.dist))
     .pipe(browserSync.stream());
 }
 
 // Images
 function image() {
     return gulp.src(paths.images.watch)
-    .pipe(changed(paths.images.dest))
-    .pipe(gulp.dest(paths.images.dest))
+    .pipe(changed(paths.images.dist))
+    .pipe(gulp.dest(paths.images.dist))
     .pipe(browserSync.stream());
 }
 

package.json

@@ -5,40 +5,42 @@
     "keywords": [
         "gulp",
         "scss",
-        "sass",
         "node",
         "nunjucks"
     ],
     "repository": {
         "type": "git",
-        "url": "https://github.com/digi-brains/StreamBuilder"
+        "url": "https://github.com/sageworksstudio/StreamBuilder"
     },
     "author": {
         "name": "Chris Brown",
-        "email": "chris@digitalbrains.io",
-        "url": "https://digitalbrains.io"
+        "email": "chris@sageworksstudio.com",
+        "url": "https://sageworksstudio.com"
     },
-    "homepage": "https://github.com/digi-brains/StreamBuilder",
+    "homepage": "https://github.com/sageworksstudio/StreamBuilder",
     "bugs": {
-        "url": "https://github.com/digi-brains/StreamBuilder/issues",
-        "email": "chris@digitalbrains.io"
+        "url": "https://github.com/sageworksstudio/StreamBuilder/issues",
+        "email": "chris@sageworksstudio.com"
     },
     "license": "MIT",
     "devDependencies": {
-        "beeper": "2.0.0",
-        "browser-sync": "2.26.4",
-        "ansi-colors": "3.2.4",
-        "fancy-log": "1.3.3",
-        "fs-extra": "7.0.1",
-        "gulp": "4.0.1",
-        "gulp-autoprefixer": "6.1.0",
-        "gulp-changed": "3.2.0",
-        "gulp-data": "1.3.1",
-        "gulp-nunjucks-render": "2.2.3",
-        "gulp-plumber": "1.2.1",
-        "gulp-sass": "4.0.2",
-        "gulp-sourcemaps": "2.6.5",
-        "gulp-uglify": "3.0.2",
-        "node-normalize-scss": "8.0.0"
-    }
+        "beeper"                : "2.0.0",
+        "browser-sync"          : "2.26.7",
+        "ansi-colors"           : "4.1.1",
+        "fancy-log"             : "1.3.3",
+        "fs-extra"              : "8.1.0",
+        "gulp"                  : "4.0.2",
+        "gulp-autoprefixer"     : "7.0.1",
+        "gulp-changed"          : "4.0.2",
+        "gulp-data"             : "1.3.1",
+        "gulp-nunjucks-render"  : "2.2.3",
+        "gulp-plumber"          : "1.2.1",
+        "gulp-sass"             : "4.0.2",
+        "gulp-sourcemaps"       : "2.6.5",
+        "gulp-uglify"           : "3.0.2",
+        "node-normalize-scss"   : "8.0.1"
+    },
+    "browserslist": [
+        "defaults"
+    ]
 }

src/data/data.json

@@ -0,0 +1,7 @@
+{
+    "title": {
+        "title": "StreamBuilder",
+        "tagline": "a highly customizable, automated build environment well suited for HTML, CSS and JavaScript prototyping"
+    },
+    
+}

src/pages/index.njk

@@ -3,7 +3,7 @@
 {% block content %}
 
     {% include "partials/header.njk" %}
-        <main id="main" data-controller="Page" data-action="">
+        <main id="main" data-controller="page" data-action="">
 
             <h1>
                 H1 Heading

src/pages/templates/layout.njk

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>StreamBuilder</title>
+        <title>{{ title.title }} - {{ title.tagline }}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="css/app.css">
     </head>