[FEATURE] better defaults, uncss support in dev, extra options

gulpfile.js/config.js

@@ -14,7 +14,7 @@ var settings = {
     tests: 'test', // Folder for end to end tests
 
     // All of these paths are located inside the paths.src (source/) folder
-    scripts: 'javascripts', // Folder where main javascript files are located
+    scripts: 'app', // Folder where main javascript files are located
     styles: 'stylesheets', // Stylesheets folder
     images: 'images', // Images folder
     vendor: 'vendor', // Third party scripts that aren't bower components
@@ -27,9 +27,9 @@ var settings = {
 
   browserSync: { // Server config
     port: 4567,  // Port to run the server on
-    open: true, // Opens a browser tab with the app when the server starts
+    open: false, // Opens a browser tab with the app when the server starts
     notify: false, // Show/hides the small notification popup when changes are made
-    ghostMode: false, // Enables ghost mode (mirroring actions to all open browsers)
+    ghostMode: false, // Enables ghost mode (mirroring actions to all connected browsers)
   },
 
   // Name for env settings object, either Angular module constant or global variable
@@ -54,21 +54,25 @@ var settings = {
   },
 
   html: { // Support template preprocessing
-    preprocessor: false, // Use a custom html preprocessor (the gulp variant!), require('gulp-haml')
+    preprocessor: false, // Use a custom html preprocessor (the gulp variant!), ex: require('gulp-haml')
     preprocessorOptions: {}, // Pass options into the preprocessor
     minify: true, // Enable html minification
     minifyOptions: {} // Options for html-min
   },
 
   styles: { // Options for the sass compiler
     sass: true,
-    autoprefixer: true,
-    sourcemaps: false,
-    combineMediaQueries: true, // Combine media queries
-    compiler: {
+    sassOptions: {
       indentedSyntax: true,
       imagePath: 'images',
       precision: 8
+    },
+    autoprefixer: true, // Autoprefixer
+    sourcemaps: false, // Sass sourcemaps
+    combineMediaQueries: true, // Combine media queries
+    uncss: false, // Remove unused CSS styles from your production compiled stylesheet
+    uncssOptions: {
+      ignore: [/disabled+/, /open+/, /active+/]
     }
   },
 
@@ -86,14 +90,16 @@ var settings = {
   },
 
   test: { // Options for tests
+    protractor: {
+      baseUrl: 'http://localhost'
+    }
   },
 
   build: { // Options for compiling the app
     gzip: true, // Enable gzip compression
     archive: true, // Zip up the app contents into build.zip (for uploading to GitHub releases)
     archiveName: 'build.zip', // Name of the archive (only .zip supported for now)
     folder: false, // str | function. A custom folder to build into. Useful when needing to deploy to a sub folder
-    uncss: false // Remove unused CSS styles from your compiled stylesheet
   },
 
   deploy: { // Options for deploying the app
@@ -102,10 +108,10 @@ var settings = {
     slack: true, // Using SLACK_WEBHOOK_URL env variable, post a message to slack
   },
 
-  extensions: { // Used as a reference in a couple tasks
+  extensions: { // Used as a reference for globs in a couple tasks
     scripts: ['js', 'coffee', 'js.coffee'],
     templates: ['html', 'haml', 'jade', 'pug', 'slim', 'jst', 'eco', 'jst.eco'],
-    styles: ['css', 'scss', 'sass', 'style', 'css.scss', 'css.sass'],
+    styles: ['css', 'scss', 'sass', 'css.scss', 'css.sass'],
     fonts: ['eot', 'svg', 'ttf', 'woff', 'woff2', 'otf'],
     images: ['jpg', 'jpeg', 'png', 'svg', 'gif']
   }

gulpfile.js/tasks/browsersync.js

@@ -12,8 +12,9 @@ var reload = browserSync.reload;
 var browserSyncSpa = require('browser-sync-spa');
 
 // Better support for Angular and BrowserSync
-if (config.angular.enabled)
+if (config.angular.enabled) {
   browserSync.use(browserSyncSpa({selector: '[ng-app]'}));
+}
 
 // Development server
 function server(callback) {
@@ -30,6 +31,13 @@ function server(callback) {
     logPrefix: function() {
       return gutil.colors.green('[bendystraw] ');
     }
+  }, function() {
+    notifier.notify({
+      title: 'bendystraw',
+      message: 'Server is running on localhost:' + config.browserSync.port,
+      icon: path.join(__dirname, '../lib/logo.png'),
+      sound: true
+    });
   });
 
   // Watch the root index file for changes
@@ -44,24 +52,13 @@ function server(callback) {
 
 gulp.task('browsersync', server);
 
-gulp.task('notify', function(callback) {
-  notifier.notify({
-    title: 'bendystraw',
-    message: 'Server is running on localhost:' + config.browserSync.port,
-    icon: path.join(__dirname, '../lib/logo.png'),
-    sound: true
-  })
-  callback();
-})
-
 gulp.task('server', function(callback) {
   util.log('Starting server in ' + gutil.colors.yellow(process.env.NODE_ENV) + ' environment');
 
   runSequence(
     'clean',
     'watch',
     'browsersync',
-    'notify',
     callback
   );
 });

gulpfile.js/tasks/build.js

@@ -17,7 +17,6 @@ var useref = require('gulp-useref');
 var uglify = require('gulp-uglify');
 var minifyCss = require('gulp-minify-css');
 var minifyHtml = require('gulp-minify-html');
-var uncss = require('gulp-uncss');
 var preprocess = require('gulp-preprocess');
 var gzip = require('gulp-gzip');
 var zip = require('gulp-zip');
@@ -67,11 +66,8 @@ function compile(callback) {
     .pipe(jsFilter)
     .pipe(gulpif(config.angular.enabled, ngAnnotate()))
     .pipe(uglify())
-    .on('error', util.errorHandler('uglify'))
     .pipe(jsFilter.restore())
     .pipe(cssFilter)
-    .pipe(gulpif(config.build.uncss, uncss({ html: [ path.join(config.paths.dev, '**/*.html') ] })))
-    .on('error', util.errorHandler('uncss'))
     .pipe(minifyCss())
     .pipe(cssFilter.restore())
     .pipe(assets.restore())
@@ -85,7 +81,7 @@ function compile(callback) {
     .pipe(gulp.dest(path.join(config.paths.build, '/')))
     .pipe(gulpif(config.build.archive, zip('build.zip')))
     .pipe(gulp.dest(path.join(config.paths.build, '/')))
-    // .pipe(gulpif(config.build.folder, folder(callback)))
+    .pipe(gulpif(config.build.folder, folder(callback)))
 }
 
 gulp.task('compile', compile);

gulpfile.js/tasks/deploy.js

@@ -81,7 +81,7 @@ function deploy(commits) {
   var version = manifest.version();
   var owner = process.env.CIRCLE_USER || manifest.owner() || manifest.repo();
 
-  util.log('Deploying ' + gutil.colors.yellow(version) + ' to S3 bucket ' + gutil.colors.yellow(options.aws_bucket));
+  util.log('🚀 Deploying ' + gutil.colors.yellow(version) + ' to S3 bucket ' + gutil.colors.yellow(options.aws_bucket));
 
   return gulp.src([
     path.join(config.paths.build, '*'),
@@ -115,7 +115,7 @@ function deploy(commits) {
       true,
       notifier.notify({
         title: 'bendystraw',
-        message: 'Successfully deployed to ' + options.aws_bucket,
+        message: '🍺 Deployed to ' + options.aws_bucket,
         icon: path.join(__dirname, '../lib/logo.png'),
         sound: true
       })
@@ -134,13 +134,4 @@ gulp.task('deploy', function(callback) {
   });
 });
 
-gulp.task('ship', function(callback) {
-  runSequence(
-    'build',
-    'release',
-    'deploy',
-    callback
-  );
-});
-
 module.exports = deploy;

gulpfile.js/tasks/env.js

@@ -49,7 +49,7 @@ function env() {
   fileContent = JSON.stringify(fileContent);
 
   // If not using angular, use a global variable for the env path
-  // ex: Settings = {"API": "http://localhost"}
+  // ex: ENV = {"API": "http://localhost"}
   if (!config.angular.enabled) {
     fileContent = config.envConstant + " = " + fileContent;
   }

gulpfile.js/tasks/styles.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var util = require('../util');
+var _ = require('lodash');
 
 var path = require('path');
 
@@ -12,6 +13,7 @@ var sass = require('gulp-sass');
 var sassGlob = require('gulp-sass-glob');
 var autoprefixer = require('gulp-autoprefixer');
 var cmq = require('gulp-combine-mq');
+var uncss = require('gulp-uncss');
 
 // Compile the Sass files and autoprefix them
 function styles() {
@@ -20,12 +22,11 @@ function styles() {
   return gulp.src(path.join(config.paths.src, config.paths.styles, '**/*.{' + config.extensions.styles + '}'))
     .pipe(gulpif(config.styles.sourcemaps, sourcemaps.init()))
     .pipe(gulpif(config.styles.sass, sassGlob()))
-    .pipe(gulpif(config.styles.sass, sass(config.styles.compiler)))
+    .pipe(gulpif(config.styles.sass, sass(config.styles.sassOptions)))
     .on('error', util.errorHandler('sass'))
     .pipe(gulpif(config.styles.autoprefixer, autoprefixer()))
-    .on('error', util.errorHandler('autoprefixer'))
     .pipe(gulpif(config.styles.combineMediaQueries, cmq()))
-    .on('error', util.errorHandler('combine-mq'))
+    .pipe(gulpif(config.styles.uncss, uncss(_.merge({ html: [ path.join(config.paths.dev, '**/*.html') ] }, config.styles.uncssOptions))))
     .pipe(gulpif(config.styles.sourcemaps, sourcemaps.write()))
     .pipe(gulp.dest(dest))
     .pipe(browserSync.stream({match: "**/*.css"}));

gulpfile.js/tasks/test.js

@@ -33,16 +33,13 @@ gulp.task('tdd', function (callback) {
 gulp.task('webdriver_update', webdriver_update);
 gulp.task('webdriver_standalone', webdriver_standalone);
 
-gulp.task('e2e', ['webdriver_update'], function(callback) {
-  gulp.src(path.join(config.paths.tests, config.paths.e2e, '/**/*.{js,coffee}'))
+gulp.task('e2e', function(callback) {
+  gulp.src(path.join(config.paths.tests, config.paths.e2e, '/**/*.{' + config.extensions.scripts + '}'))
     .pipe(protractor({
       configFile: path.resolve('protractor.conf.js'),
-      args: ['--baseUrl', 'http://localhost:' + config.browserSync.port]
+      args: ['--baseUrl', config.test.protractor.baseUrl + ':' + config.browserSync.port]
     }))
     .on('error', util.errorHandler('protractor'))
-    .on('end', function () {
-      callback();
-    });
 });
 
 module.exports = function(){};