Merge pull request #296 from zurb/gulpfile

Gulpfile refactor
zurb · Dec 12, 2014 · a839fe2 · a839fe2
2 parents 570a172 + 15be8b4
commit a839fe2
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 138 deletions.
diff --git a/docs/assets/js/angular.js → Docs/assets/js/app.js b/docs/assets/js/angular.js → Docs/assets/js/app.js
diff --git a/docs/index.html b/docs/index.html
@@ -7,8 +7,8 @@
     <link rel="shortcut icon" href="assets/img/favicon.ico">
     <link href="assets/css/app.css" rel="stylesheet" type="text/css">
     <script src="assets/js/routes.js"></script>
+    <script src="assets/js/foundation.js"></script>
     <script src="assets/js/app.js"></script>
-    <script src="assets/js/angular-app.js"></script>
   </head>
   <body zf-esc-close>
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,5 +1,25 @@
 'use strict'
 
+// Foundation for Apps
+//
+// We use this Gulpfile to assemble the documentation, run unit tests,
+// and deploy changes to the live documentation and CDN.
+//
+// The tasks are grouped into these categories:
+//   1. Libraries
+//   2. Variables
+//   3. Cleaning files
+//   4. Copying files
+//   5. Stylesheets
+//   6. JavaScript
+//   7. Testing
+//   8. Server
+//   9. Deployment
+//  10. Default tasks
+
+// 1. LIBRARIES
+// - - - - - - - - - - - - - - -
+
 var gulp           = require('gulp'),
     rimraf         = require('rimraf'),
     runSequence    = require('run-sequence'),
@@ -14,23 +34,46 @@ var gulp           = require('gulp'),
     modRewrite     = require('connect-modrewrite'),
     dynamicRouting = require('./bin/gulp-dynamic-routing'),
     karma          = require('gulp-karma'),
-    rsync          = require('gulp-rsync');
+    rsync          = require('gulp-rsync'),
+    merge          = require('merge-stream');
 
-// Deploy
-gulp.task('deploy', ['build'], function() {
-  return gulp.src('build/**')
-    .pipe(rsync({
-      root: 'build',
-      hostname: 'deployer@72.32.134.77',
-      destination: '/home/deployer/sites/foundation-apps/current'
-    }));
-});
+// 2. VARIABLES
+// - - - - - - - - - - - - - - -
+
+var foundationJS = [
+  'bower_components/fastclick/lib/fastclick.js',
+  'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
+  'bower_components/tether/tether.js',
+  'bower_components/angular/angular.js',
+  'bower_components/angular-animate/angular-animate.js',
+  'bower_components/ui-router/release/angular-ui-router.js',
+  'js/vendor/**/*.js',
+  'js/angular/**/*.js'
+];
+var docsJS = [
+  'bower_components/marked/lib/marked.js',
+  'bower_components/angular-highlightjs/angular-highlightjs.js',
+  'bower_components/highlightjs/highlight.pack.js',
+  'bower_components/allmighty-autocomplete/script/autocomplete.js',
+  'docs/assets/js/app.js'
+];
+
+// 3. CLEANIN' FILES
+// - - - - - - - - - - - - - - -
 
 // Clean build directory
 gulp.task('clean', function(cb) {
   rimraf('./build', cb);
 });
 
+// Clean the partials directory
+gulp.task('clean:partials', function(cb) {
+  rimraf('./build/partials', cb);
+});
+
+// 4. COPYING FILES
+// - - - - - - - - - - - - - - -
+
 // Copy static files (but not the Angular templates, Sass, or JS)
 gulp.task('copy', function() {
   var dirs = [
@@ -47,17 +90,32 @@ gulp.task('copy', function() {
     .pipe(gulp.dest('build/assets/img/iconic/'));
 });
 
-gulp.task('clean-partials', function(cb) {
-  rimraf('./build/partials', cb);
+// Copy page templates and generate routes
+gulp.task('copy:templates', ['copy'], function() {
+  var config = [];
+
+  return gulp.src('./docs/templates/**/*.html')
+    .pipe(dynamicRouting({
+      path: 'build/assets/js/routes.js',
+      root: 'docs'
+    }))
+    .pipe(markdown())
+    .pipe(highlight())
+    .pipe(gulp.dest('./build/templates'))
+  ;
 });
 
-gulp.task('copy-partials', ['clean-partials'], function() {
+// Copy Foundation directive partials
+gulp.task('copy:partials', ['clean:partials'], function() {
   return gulp.src(['js/angular/partials/**.*'])
     .pipe(gulp.dest('./build/partials/'));
 });
 
+// 5. STYLESHEETS
+// - - - - - - - - - - - - - - -
+
+// Inject styles for docs-specific libraries
 gulp.task('css', ['sass'], function() {
-  //copy css
   var dirs = [
     'bower_components/allmighty-autocomplete/style/autocomplete.css',
     'build/assets/css/app.css'
@@ -66,16 +124,15 @@ gulp.task('css', ['sass'], function() {
     .pipe(concat('app.css'))
     .pipe(gulp.dest('build/assets/css'))
   ;
-
 });
 
+// Compile stylesheets with Ruby Sass
 gulp.task('sass', function() {
-  return gulp.src('docs/assets/scss/app.scss')
-    .pipe(sass({
+  return sass('docs/assets/scss/', {
       loadPath: ['scss'],
       style: 'nested',
       bundleExec: true
-    }))
+    })
     .on('error', function(e) {
       console.log(e);
     })
@@ -85,6 +142,7 @@ gulp.task('sass', function() {
     .pipe(gulp.dest('./build/assets/css/'));
 });
 
+// Compile stylesheets with node-sass
 gulp.task('node-sass', function() {
   return gulp.src('docs/assets/scss/app.scss')
     .pipe(nodeSass({
@@ -99,67 +157,38 @@ gulp.task('node-sass', function() {
     .pipe(gulp.dest('./build/assets/css/'));
 });
 
-// Process Foundation JS
-gulp.task('uglify', ['uglify-app'], function() {
-  var libs = [
-    'bower_components/fastclick/lib/fastclick.js',
-    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
-    'bower_components/notify.js/notify.js',
-    'bower_components/tether/tether.js',
-    'bower_components/marked/lib/marked.js',
-    'bower_components/angular/angular.js',
-    'bower_components/allmighty-autocomplete/script/autocomplete.js',
-    'bower_components/angular-animate/angular-animate.js',
-    'bower_components/ui-router/release/angular-ui-router.js',
-    'bower_components/angular-highlightjs/angular-highlightjs.js',
-    'bower_components/highlightjs/highlight.pack.js',
-    'js/vendor/**/*.js',
-  ];
+// 6. JAVASCRIPT
+// - - - - - - - - - - - - - - -
 
-  return gulp.src(libs)
+// Compile Foundation JavaScript
+gulp.task('javascript', function() {
+  return gulp.src(foundationJS)
     .pipe(uglify({
       beautify: true,
       mangle: false
     }).on('error', function(e) {
       console.log(e);
     }))
-    .pipe(concat('app.js'))
+    .pipe(concat('foundation.js'))
     .pipe(gulp.dest('./build/assets/js/'))
   ;
 });
 
-// Process Angular JS
-gulp.task('uglify-app', function() {
-  var libs = [
-    'docs/assets/js/angular.js',
-    'js/angular/**/*.js',
-    '!js/angular/app.js'
-  ];
-
-  return gulp.src(libs)
+// Compile documentation-specific JavaScript
+gulp.task('javascript:docs', function() {
+  return gulp.src(docsJS)
     .pipe(uglify({
       beautify: true,
       mangle: false
     }))
-    .pipe(concat('angular-app.js'))
+    .pipe(concat('app.js'))
     .pipe(gulp.dest('./build/assets/js/'))
   ;
 
 });
 
-gulp.task('copy-templates', ['copy'], function() {
-  var config = [];
-
-  return gulp.src('./docs/templates/**/*.html')
-    .pipe(dynamicRouting({
-      path: 'build/assets/js/routes.js',
-      root: 'docs'
-    }))
-    .pipe(markdown())
-    .pipe(highlight())
-    .pipe(gulp.dest('./build/templates'))
-  ;
-});
+// 7. SERVER
+// - - - - - - - - - - - - - - -
 
 gulp.task('server:start', function() {
   connect.server({
@@ -172,7 +201,10 @@ gulp.task('server:start', function() {
   });
 });
 
-gulp.task('karma-test', ['build', 'node-sass'], function() {
+// 8. TESTING
+// - - - - - - - - - - - - - - -
+
+gulp.task('karma:test', ['build', 'node-sass'], function() {
   var testFiles = [
     'build/assets/js/app.js',
     'build/assets/js/angular-app.js',
@@ -195,31 +227,64 @@ gulp.task('karma-test', ['build', 'node-sass'], function() {
 
 });
 
-gulp.task('test', ['karma-test'], function() {
+gulp.task('test', ['karma:test'], function() {
   console.log('Tests finished.');
 });
 
+// 9. DEPLOYMENT
+// - - - - - - - - - - - - - - -
+
+// Deploy documentation
+gulp.task('deploy', ['build'], function() {
+  return gulp.src('build/**')
+    .pipe(rsync({
+      root: 'build',
+      hostname: 'deployer@72.32.134.77',
+      destination: '/home/deployer/sites/foundation-apps/current'
+    }));
+});
+
+// Deploy to CDN
+gulp.task('deploy:cdn', function() {
+  var js = gulp.src(foundationJS)
+    .pipe(uglify())
+    .pipe(concat('foundation.js'));
+  var css = sass('scss/', {
+    sourcemap: false, style: 'compressed'
+  });
+
+  merge(js, css)
+    .pipe(rsync({
+      hostname: 'deployer@72.32.134.77',
+      destination: '/home/deployer/sites/foundation-apps/current/cdn'
+    }));
+});
+
+// 10. NOW BRING IT TOGETHER
+// - - - - - - - - - - - - - - -
+
+// Build the documentation once
 gulp.task('build', function(cb) {
-  runSequence('clean', ['copy', 'copy-partials', 'css', 'uglify'], 'copy-templates', function() {
+  runSequence('clean', ['copy', 'copy:partials', 'css', 'javascript', 'javascript:docs'], 'copy:templates', function() {
     console.log('Successfully built.');
     cb();
   });
 });
 
-
+// Build the documentation, start a test server, and re-compile when files change
 gulp.task('default', ['build', 'server:start'], function() {
-  // Watch Sass
-  gulp.watch(['./docs/assets/scss/**/*', './scss/**/*'], ['css']);
-
-  // Watch JavaScript
-  gulp.watch(['./docs/assets/js/**/*', './js/**/*'], ['uglify']);
-
   // Watch static files
   gulp.watch(['./docs/**/*.*', '!./docs/templates/**/*.*', '!./docs/assets/{scss,js}/**/*.*'], ['copy']);
 
+  // Watch Angular templates
+  gulp.watch(['docs/templates/**/*.html'], ['copy:templates']);
+
   // Watch Angular partials
-  gulp.watch(['js/angular/partials/**.*'], ['copy-partials']);
+  gulp.watch(['js/angular/partials/**.*'], ['copy:partials']);
 
-  // Watch Angular templates
-  gulp.watch(['docs/templates/**/*.html'], ['copy-templates']);
+  // Watch Sass
+  gulp.watch(['./docs/assets/scss/**/*', './scss/**/*'], ['css']);
+
+  // Watch JavaScript
+  gulp.watch(['./docs/assets/js/**/*', './js/**/*'], ['javascript']);
 });
diff --git a/js/angular/common/foundation.init.js b/js/angular/common/foundation.init.js
@@ -143,7 +143,7 @@ angular.module('foundation.init.state', ['ui.router'])
       return {
         templateUrl: path,
         controller: getController(state),
-      }
+      };
     }
 
     function getController(state) {
@@ -156,3 +156,22 @@ angular.module('foundation.init.state', ['ui.router'])
       return ctrl;
     }
   }]);
+
+angular.module('foundation.init.state')
+  .controller('DefaultController', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state) {
+    var params = [];
+    angular.forEach($stateParams, function(value, key) {
+      params[key] = value;
+    });
+
+    $scope.params = params;
+    $scope.current = $state.current.name;
+
+    if($state.current.views) {
+      $scope.vars = $state.current.data.vars;
+      $scope.composed = $state.current.data.vars.children;
+    } else {
+      $scope.vars = $state.current.data.vars;
+    }
+  }
+]);
diff --git a/js/angular/controllers.js b/js/angular/controllers.js