core updates and a rewritten gulpfile

Author: sageworksstudio

Diff for: README.md

@@ -8,7 +8,7 @@ StreamBuilder is an automated build environment well suited for HTML, CSS and Ja
 1. Compile SCSS into minified CSS.
 2. Minify JavaScript.
 3. Move your html/css/JavaScripts and images from the source (working) folder, to the destination folder.
-4. Refresh your browser for you as you make changes to your source files. StreamBuilder will create a proxy server and listen on port 3000 of your localhost environment (example: http://localhost:3000/streambuilder/dist).
+4. Refresh your browser for you as you make changes to your source files. StreamBuilder will create a proxy server and listen on port 3000 of your localhost environment (example: http://localhost:3000/StreamBuilder/dist).
 
 *__StreamBuilder's workflow__*
 
@@ -24,6 +24,7 @@ Note: if you run GNU/Linux you can now get the most recent version of Node with
 2. Install the node modules listed in the package.json file globally. I.e., `sudo npm install -g <node_module>`
 3. From a terminal `cd path/to/streambuilder`
 4. `npm update` This will create a new directory "node_modules" where NPM will install all the required node modules.
+5. Edit the config.json file to reflect your destination URL.
 5. Run `gulp`
 
 ## Advanced configuration

Diff for: config.json

@@ -0,0 +1,19 @@
+{
+    "configuration": {
+        "devUrl" : "/StreamBuilder/dist",
+
+        "source": {
+            "style" : "./src/scss/**/*.scss",
+            "js"    : "./src/js/**/*.js",
+            "html"  : "./src/html/**/*.html",
+            "img"   : "./src/img/**/*"
+        },
+
+        "destination": {
+            "style" : "./dist/css",
+            "js"    : "./dist/js",
+            "html"  : "./dist",
+            "img"   : "./dist/img" 
+        }
+    }
+}

Diff for: gulpfile.js

@@ -1,96 +1,103 @@
-var /* BEGIN ENVIRONMENT CONFIG */
-    conf_image_dest     = './dist/img',                     // where to output images
-    conf_output_dest    = './dist',                         // the base output directory
-    conf_script_dest    = './dist/js',                      // where to output scripts
-    conf_style_dest     = './dist/css',                     // where to output styles
-    conf_template_dest  = './dist',                         // where to output html templates
-    conf_url_dest       = 'http://localhost/StreamBuilder/dist',   // the local URL of the project
-    /* END ENVIRONMENT CONFIG */
-
-    browsersync         = require('browser-sync'),
-    changed             = require('gulp-changed'),
-    gulp                = require('gulp'),
-    gulputil            = require('gulp-util'),
-    gulpwatch           = require('gulp-watch'), // gulp-watch is not the same as gulp.watch !
-    path                = require('path'),
-    reload              = browsersync.reload,
-    sass                = require('gulp-sass'),
-    uglify              = require('gulp-uglify');
+var browserSync = require('browser-sync').create(),
+    changed     = require('gulp-changed'),
+    config      = require('./config.json').configuration,
+    gulp        = require('gulp'),
+    gulputil    = require('gulp-util'),
+    gulpwatch   = require('gulp-watch'),
+    reload      = browserSync.reload,
+    sass        = require('gulp-sass'),
+    uglify      = require('gulp-uglify');
 
 /**
- * Compile scss as compressed css
+ * Style
  */
 gulp.task('style', function () {
-    return gulp.src('./src/scss/layout.scss')
-        .pipe(changed(conf_style_dest))
+    return gulp.src(config.source.style)
+        .pipe(changed(config.destination.style, {extension: '.css'}))
         .pipe(sass({'outputStyle': 'compressed'}))
-        .pipe(gulp.dest(conf_style_dest))
+        .pipe(gulp.dest(config.destination.style))
         .pipe(reload({stream:true}));
 });
 
 /**
- * HTML
- * If the destination file has been changed, reload the page.
+ * Images
  */
-gulp.task('templates', function () {
-    return gulp.src('./src/html/**')
-        .pipe(gulp.dest(conf_output_dest))
+gulp.task('image', function () {
+    return gulp.src(config.source.img)
+        .pipe(changed(config.destination.img))
+        .pipe(gulp.dest(config.destination.img))
         .pipe(reload({stream:true}));
 });
 
 /**
- * Move images.
+ * Script
  */
-gulp.task('images', function () {
-    return gulp.src('./src/img/**')
-        .pipe(gulp.dest(conf_image_dest))
+gulp.task('script', function () {
+    return gulp.src(config.source.js)
+        .pipe(changed(config.destination.js, {extension: '.js'}))
+        .pipe(uglify())
+        .pipe(gulp.dest(config.destination.js))
         .pipe(reload({stream:true}));
 });
 
 /**
- * Compress javascript.
+ * HTML
  */
-gulp.task('scripts', function () {
-    return gulp.src('./src/js/**')
-        .pipe(changed(conf_script_dest))
-        .pipe(uglify())
-        .pipe(gulp.dest(conf_script_dest))
+gulp.task('html', function () {
+    return gulp.src(config.source.html)
+        .pipe(changed(config.destination.html, {extension: '.html'}))
+        .pipe(gulp.dest(config.destination.html))
         .pipe(reload({stream:true}));
-
 });
 
 /**
- * Start a proxy server
+ * Server
  */
-gulp.task('server', function() {
-    browsersync({proxy: conf_url_dest});
-})
+gulp.task('server', function (){
+    browserSync.init({
+        proxy: config.devUrl
+    });
+});
 
 /**
- * Watch for changed files
+ * Watch
  */
-gulp.task('watch', function () {
-    // watch for files that were changed
-    gulp.watch('./src/scss/**/*.scss', ['style']);
-    gulp.watch('./src/html/**/*.html', ['templates']);
-    gulp.watch('./src/js/**/*.js', ['scripts']);
-    // watch for files that are added
-    gulpwatch('./src/img/**', function () {
-        gulp.src('./src/img/**')
-        .pipe(gulp.dest(conf_image_dest))
+gulp.task('watch', function (){
+
+    gulpwatch(config.source.style, ['style'], function () {
+        gulp.src(config.source.style)
+        .pipe(changed(config.destination.style, {extension: '.css'}))
+        .pipe(sass({'outputStyle': 'compressed'}))
+        .pipe(gulp.dest(config.destination.style))
         .pipe(reload({stream:true}));
     });
-    gulpwatch('./src/js/**', function () {
-        gulp.src('./src/js/**')
-        .pipe(gulp.dest(conf_script_dest))
+
+    gulpwatch(config.source.img, ['image'], function () {
+        gulp.src(config.source.img)
+        .pipe(changed(config.destination.img))
+        .pipe(gulp.dest(config.destination.img))
+        .pipe(reload({stream:true}));
+    });
+
+    gulpwatch(config.source.js, ['script'], function () {
+        gulp.src(config.source.js)
+        .pipe(changed(config.destination.js, {extension: '.js'}))
+        .pipe(uglify())
+        .pipe(gulp.dest(config.destination.js))
+        .pipe(reload({stream:true}));
+    });
+
+    gulpwatch(config.source.html, ['html'], function () {
+        gulp.src(config.source.html)
+        .pipe(changed(config.destination.html, {extension: '.html'}))
+        .pipe(gulp.dest(config.destination.html))
         .pipe(reload({stream:true}));
     });
-    gulputil.log(gulputil.colors.inverse("Shazam! We're up and running."));
 });
 
 /**
  * Default task
  */
-gulp.task('default', ['style', 'templates', 'images', 'scripts', 'server', 'watch'], function () {
-    // Start all tasks
+gulp.task('default', ['style', 'image', 'script', 'html', 'server', 'watch'], function () {
+    gulputil.log(gulputil.colors.inverse("Excelsior! We're up and running."));
 });

Diff for: package.json

@@ -28,7 +28,7 @@
     "browser-sync": "^2.18.6",
     "gulp": "^3.9.1",
     "gulp-changed": "^1.3.2",
-    "gulp-sass": "^1.3.3",
+    "gulp-sass": "2.3.2",
     "gulp-uglify": "^1.5.4",
     "gulp-util": "^3.0.8",
     "gulp-watch": "^4.3.11"

Diff for: src/html/index.html

@@ -26,13 +26,6 @@
             </article>
         </main>
         <footer>
-           <nav>
-               <ul>
-                    <li><a href="#" title="home">home</a></li>
-                    <li><a href="#" title="about">about</a></li>
-                    <li><a href="#" title="contact">contact</a></li>
-               </ul>
-           </nav> 
         </footer>
     </body>
 </html>

Diff for: src/js/main.js

@@ -3,5 +3,4 @@
 (function ($) {
     "use strict";
 
-
 }(jQuery));

Diff for: src/scss/layout.scss

@@ -16,8 +16,11 @@
 
 
 
-
 /* - - - - - - - - - - Responsive Breakpoint Styles Here - - - - - - - - - - */
+/* XSmall devices and larger */
+@include respond(xs) {
+
+}
 /* Small devices and larger */
 @include respond(sm) {
 
@@ -36,31 +39,4 @@
 /* XLarge devices and larger */
 @include respond(xl) {
 
-}
-
-
-
-
-
-/* - - - - - - - - - - BEGIN DEMO Styles - - - - - - - - - - */
-.blue-colp-fixed {
-    color: #efefef;
-    background: #58BEE0;
-    @include colp(.25);
-}
-.red-colp-fixed {
-    color: #efefef;
-    background: #E05858;
-    @include colp(.75);
-}
-.blue-colu-fixed {
-    color: #efefef;
-    background: #58BEE0;
-    @include colu(2.4, 7);
-}
-.red-colu-fixed {
-    color: #efefef;
-    background: #E05858;
-    @include colu(4.6, 7);
-}
-/* - - - - - - - - - - END DEMO Styles - - - - - - - - - - */
+}