Add Gulp tasks

greypants · greypants · commit 76baccdf4fc3 · 2015-02-10T19:23:38.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ capybara-*.html
 /public/system
 /coverage/
 /spec/tmp
+/node_modules
 **.orig
 rerun.txt
 pickle-email-*.html
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,16 +1,10 @@
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
-// about supported directives.
+// Only include gem installed javascript assets here. All other js develoment should use Common JS
+// and will be compiled with Gulp and Browserify
 //
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require_tree .
+//= require compiled/global.js
diff --git a/app/assets/javascripts/global.coffee b/app/assets/javascripts/global.coffee
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -2,14 +2,8 @@
  * This is a manifest file that'll be compiled into application.css, which will include all the files
  * listed below.
  *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ * Use this file to include any stylesheet assets from installed gems. All other css is compiled with
+ * libsass with Gulp.
  *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
+ *= require compiled/global.css
  */
diff --git a/app/assets/stylesheets/global.sass b/app/assets/stylesheets/global.sass
@@ -0,0 +1,2 @@
+body
+  background: blue
diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
@@ -0,0 +1,4 @@
+class WelcomeController < ApplicationController
+  def index
+  end
+end
diff --git a/app/helpers/welcome_helper.rb b/app/helpers/welcome_helper.rb
@@ -0,0 +1,2 @@
+module WelcomeHelper
+end
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
@@ -0,0 +1,2 @@
+<h1>Welcome#index</h1>
+<p>Find me in app/views/welcome/index.html.erb</p>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,9 +1,11 @@
 Rails.application.routes.draw do
+  get 'welcome/index'
+
   # The priority is based upon order of creation: first created -> highest priority.
   # See how all your routes lay out with "rake routes".
 
   # You can have the root of your site routed with "root"
-  # root 'welcome#index'
+  root 'welcome#index'
 
   # Example of regular route:
   #   get 'products/:id' => 'catalog#view'
diff --git a/gulp/config.js b/gulp/config.js
@@ -0,0 +1,42 @@
+var assets = "./app/assets";
+
+module.exports = {
+  browserSync: {
+    proxy: 'localhost:3000'
+  },
+  sass: {
+    src: assets + "/stylesheets/*.{sass,scss}",
+    dest: assets + "/stylesheets/compiled",
+    settings: {
+      indentedSyntax: true, // Enable .sass syntax!
+      imagePath: 'images' // Used by the image-url helper
+    }
+  },
+  images: {
+    src: assets + "/images/**",
+    dest: assets + "/images"
+  },
+  iconFonts: {
+    name: 'Gulp Rails Icons',
+    src: assets + "/images/icons/*.svg",
+    dest: assets + '/fonts',
+    sassDest: assets + '/stylesheets/base',
+    template: './gulp/tasks/iconFont/template.sass.swig',
+    sassOutputName: '_icons.sass',
+    fontPath: 'fonts',
+    className: 'icon',
+    options: {
+      fontName: 'gulp-rails-icons',
+      appendCodepoints: true,
+      normalize: false
+    }
+  },
+  browserify: {
+    bundleConfigs: [{
+      entries: assets + '/javascripts/global.coffee',
+      dest: assets + '/javascripts/compiled',
+      outputName: 'global.js',
+      extensions: ['.js','.coffee']
+    }]
+  }
+};
diff --git a/gulp/tasks/browserSync.js b/gulp/tasks/browserSync.js
@@ -0,0 +1,7 @@
+var browserSync = require('browser-sync');
+var gulp        = require('gulp');
+var config      = require('../config').browserSync;
+
+gulp.task('browserSync', function() {
+  browserSync(config);
+});
diff --git a/gulp/tasks/browserify.js b/gulp/tasks/browserify.js
@@ -0,0 +1,64 @@
+var browserify   = require('browserify');
+var browserSync  = require('browser-sync');
+var watchify     = require('watchify');
+var bundleLogger = require('../util/bundleLogger');
+var gulp         = require('gulp');
+var handleErrors = require('../util/handleErrors');
+var source       = require('vinyl-source-stream');
+var config       = require('../config').browserify;
+var _            = require('lodash');
+
+var browserifyTask = function(callback, devMode) {
+
+  var bundleQueue = config.bundleConfigs.length;
+
+  var browserifyThis = function(bundleConfig) {
+
+    if(devMode) {
+      _.extend(bundleConfig, watchify.args, { debug: true });
+      bundleConfig = _.omit(bundleConfig, ['external', 'require']);
+    }
+
+    var b = browserify(bundleConfig);
+
+    var bundle = function() {
+      bundleLogger.start(bundleConfig.outputName);
+
+      return b
+        .bundle()
+        .on('error', handleErrors)
+        .pipe(source(bundleConfig.outputName))
+        .pipe(gulp.dest(bundleConfig.dest))
+        .on('end', reportFinished)
+        .pipe(browserSync.reload({stream:true}));
+    };
+
+    if(devMode) {
+      b = watchify(b);
+      b.on('update', bundle);
+      bundleLogger.watch(bundleConfig.outputName);
+    } else {
+      if(bundleConfig.require) b.require(bundleConfig.require);
+      if(bundleConfig.external) b.external(bundleConfig.external);
+    }
+
+    var reportFinished = function() {
+      bundleLogger.end(bundleConfig.outputName);
+
+      if(bundleQueue) {
+        bundleQueue--;
+        if(bundleQueue === 0) {
+          callback();
+        }
+      }
+    };
+
+    return bundle();
+  };
+
+  config.bundleConfigs.forEach(browserifyThis);
+};
+
+gulp.task('browserify', browserifyTask);
+
+module.exports = browserifyTask;
diff --git a/gulp/tasks/default.js b/gulp/tasks/default.js
@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('default', ['sass', 'watch']);
diff --git a/gulp/tasks/iconFont/generateIconSass.js b/gulp/tasks/iconFont/generateIconSass.js
@@ -0,0 +1,25 @@
+var gulp     = require('gulp');
+var config   = require('../../config').iconFonts;
+var swig     = require('gulp-swig');
+var rename   = require('gulp-rename');
+
+module.exports = function(codepoints, options) {
+  gulp.src(config.template)
+    .pipe(swig({
+      data: {
+        icons: codepoints.map(function(icon) {
+          return {
+            name: icon.name,
+            code: icon.codepoint.toString(16)
+          }
+        }),
+
+        fontName: config.options.fontName,
+        fontPath: config.fontPath,
+        className: config.className,
+        comment: 'DO NOT EDIT DIRECTLY!\n  Generated by gulp/tasks/iconFont.js\n  from ' + config.template
+      }
+    }))
+    .pipe(rename(config.sassOutputName))
+    .pipe(gulp.dest(config.sassDest));
+};
diff --git a/gulp/tasks/iconFont/index.js b/gulp/tasks/iconFont/index.js
@@ -0,0 +1,11 @@
+var gulp             = require('gulp');
+var iconfont         = require('gulp-iconfont');
+var config           = require('../../config').iconFonts;
+var generateIconSass = require('./generateIconSass');
+
+gulp.task('iconFont', function() {
+  return gulp.src(config.src)
+    .pipe(iconfont(config.options))
+    .on('codepoints', generateIconSass)
+    .pipe(gulp.dest(config.dest));
+});
diff --git a/gulp/tasks/iconFont/template.sass.swig b/gulp/tasks/iconFont/template.sass.swig
@@ -0,0 +1,33 @@
+// {{comment}}
+
+@font-face
+  font-family: {{fontName}}
+  src: url("{{fontPath}}/{{fontName}}.eot")
+  src: url("{{fontPath}}/{{fontName}}.eot?#iefix") format('embedded-opentype'), url("{{fontPath}}/{{fontName}}.woff") format('woff'), url("{{fontPath}}/{{fontName}}.ttf") format('truetype'), url("{{fontPath}}/{{fontName}}.svg#{{fontName}}") format('svg')
+  font-weight: normal
+  font-style: normal
+
+=icon($content)
+  &:before
+    -moz-osx-font-smoothing: grayscale
+    -webkit-font-smoothing: antialiased
+    content: $content
+    font-family: '{{fontName}}'
+    font-style: normal
+    font-variant: normal
+    font-weight: normal
+    line-height: 1
+    speak: none
+    text-transform: none
+    @content
+
+{% for icon in icons -%}
+=icon--{{icon.name}}
+  +icon("\{{icon.code}}")
+    @content
+
+.icon
+  &.-{{icon.name}}
+    +icon--{{icon.name}}
+
+{% endfor %}
diff --git a/gulp/tasks/images.js b/gulp/tasks/images.js
@@ -0,0 +1,13 @@
+var changed    = require('gulp-changed');
+var gulp       = require('gulp');
+var imagemin   = require('gulp-imagemin');
+var config     = require('../config').images;
+var browserSync  = require('browser-sync');
+
+gulp.task('images', function() {
+  return gulp.src(config.src)
+    .pipe(changed(config.dest)) // Ignore unchanged files
+    .pipe(imagemin()) // Optimize
+    .pipe(gulp.dest(config.dest))
+    .pipe(browserSync.reload({stream:true}));
+});
diff --git a/gulp/tasks/karma.js b/gulp/tasks/karma.js
@@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var karma = require('karma');
+
+var karmaTask = function(done) {
+  karma.server.start({
+    configFile: process.cwd() + '/karma.conf.js',
+    singleRun: true
+  }, done);
+};
+
+gulp.task('karma', karmaTask);
+
+module.exports = karmaTask;
diff --git a/gulp/tasks/sass.js b/gulp/tasks/sass.js
@@ -0,0 +1,18 @@
+var gulp         = require('gulp');
+var browserSync  = require('browser-sync');
+var sass         = require('gulp-sass');
+var sourcemaps   = require('gulp-sourcemaps');
+var handleErrors = require('../util/handleErrors');
+var config       = require('../config').sass;
+var autoprefixer = require('gulp-autoprefixer');
+
+gulp.task('sass', function () {
+  return gulp.src(config.src)
+    .pipe(sourcemaps.init())
+    .pipe(sass(config.settings))
+    .on('error', handleErrors)
+    .pipe(sourcemaps.write())
+    .pipe(autoprefixer({ browsers: ['last 2 version'] }))
+    .pipe(gulp.dest(config.dest))
+    .pipe(browserSync.reload({stream:true}));
+});
diff --git a/gulp/tasks/templates/iconfont.sass b/gulp/tasks/templates/iconfont.sass
@@ -0,0 +1,25 @@
+<%= comment %>
+
+@font-face
+  font-family: '<%= fontName %>'
+  src: url('<%= fontPath %><%= fontName %>.eot')
+  src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg')
+  font-weight: normal
+  font-style: normal
+
+.<%= className %>
+  &:before
+    font-family: '<%= fontName %>'
+    font-style: normal
+    font-variant: normal
+    font-weight: normal
+    line-height: 1
+    speak: none
+    text-transform: none
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+
+<% _.each(glyphs, function(glyph) { %>
+  &.-<%= glyph.name %>:before
+    content: "\<%= glyph.codepoint.toString(16).toUpperCase() %>"
+<% }); %>
diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js
@@ -0,0 +1,14 @@
+/* Notes:
+   - gulp/tasks/browserify.js handles js recompiling with watchify
+   - gulp/tasks/browserSync.js watches and reloads compiled files
+*/
+
+var gulp     = require('gulp');
+var config   = require('../config');
+var watchify = require('./browserify')
+
+gulp.task('watch', ['watchify','browserSync'], function(callback) {
+  gulp.watch(config.sass.src,   ['sass']);
+  gulp.watch(config.images.src, ['images']);
+  // Watchify will watch and recompile our JS, so no need to gulp.watch it
+});
diff --git a/gulp/tasks/watchify.js b/gulp/tasks/watchify.js
@@ -0,0 +1,7 @@
+var gulp           = require('gulp');
+var browserifyTask = require('./browserify');
+
+gulp.task('watchify', function(callback) {
+  // Start browserify task with devMode === true
+  browserifyTask(callback, true);
+});
diff --git a/gulp/util/bundleLogger.js b/gulp/util/bundleLogger.js
@@ -0,0 +1,25 @@
+/* bundleLogger
+   ------------
+   Provides gulp style logs to the bundle method in browserify.js
+*/
+
+var gutil        = require('gulp-util');
+var prettyHrtime = require('pretty-hrtime');
+var startTime;
+
+module.exports = {
+  start: function(filepath) {
+    startTime = process.hrtime();
+    gutil.log('Bundling', gutil.colors.green(filepath) + '...');
+  },
+
+  watch: function(bundleName) {
+    gutil.log('Watching files required by', gutil.colors.yellow(bundleName));
+  },
+
+  end: function(filepath) {
+    var taskTime = process.hrtime(startTime);
+    var prettyTime = prettyHrtime(taskTime);
+    gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime));
+  }
+};
diff --git a/gulp/util/handleErrors.js b/gulp/util/handleErrors.js
diff --git a/gulpfile.js b/gulpfile.js
diff --git a/karma.conf.js b/karma.conf.js
diff --git a/log/development.log b/log/development.log
diff --git a/package.json b/package.json
diff --git a/test/controllers/welcome_controller_test.rb b/test/controllers/welcome_controller_test.rb

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +class WelcomeController < ApplicationController
 +  def index
 +  end
 +end
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<h1>Welcome#index</h1>`
	`2`	`+<p>Find me in app/views/welcome/index.html.erb</p>`