basic-web-components · robbear · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -272,6 +272,8 @@ module.exports = function(grunt) {
   // Default task - prints to the console the tasks that are available to be run from the command line
   //
   grunt.registerTask('default', function() {
+    grunt.log.writeln('The Basic Web Components project now uses gulp rather than grunt.');
+    /*
     grunt.log.writeln('grunt commands this project supports:\n');
     grunt.log.writeln('  grunt build (builds consolidated basic-web-components.js, all package distributions, all documentation, and all tests)');
     grunt.log.writeln('  grunt devbuild (same as build minus building the documentation)');
@@ -281,6 +283,7 @@ module.exports = function(grunt) {
     grunt.log.writeln('  grunt set-version:version (updates package.json version values and dependencies. Ex: grunt set-version:1.0.30)');
     grunt.log.writeln('  grunt saucelabs (Runs SauceLabs tests. You must set environment variables SAUCE_USERNAME and SAUCE_ACCESS_KEY.)');
     grunt.log.writeln('  grunt watch (builds and watches changes to project files)');
+    */
   });
 
   //
@@ -294,21 +297,22 @@ module.exports = function(grunt) {
   //
   // This task makes use of the buildList global array.
   //
-  grunt.registerTask('build', ['browserify:buildFiles', 'docs', 'jshint']);
+  // grunt.registerTask('build', ['browserify:buildFiles', 'docs', 'jshint']);
 
   //
   // The devbuild task is callable from the command line and is similar to the build task but doesn't
   // build the documentation files. This is meant as a quicker task for developers actively working
   // on code.
   //
-  grunt.registerTask('devbuild', ['browserify:buildFiles', 'jshint']);
+  // grunt.registerTask('devbuild', ['browserify:buildFiles', 'jshint']);
 
   //
   // The docs task is callable from the command line. This task builds each package's
   // README.md file from jsdoc tags in the package's src JavaScript files.
   //
   // This task makes use of the docsList global array.
   //
+  /*
   grunt.registerTask('docs', function() {
     const done = this.async();
     return mapAndChain(docsList, doc => buildMarkdownDoc(doc, grunt))
@@ -319,30 +323,31 @@ module.exports = function(grunt) {
       grunt.log.error(err)
     );
   });
+  */
 
   //
   // The lint task is callable from the command line and executes the jshint task defined
   // in the Grunt config. This task looks for JavaScript warnings/errors.
   //
-  grunt.registerTask('lint', ['jshint']);
+  // grunt.registerTask('lint', ['jshint']);
 
   //
   // The saucelabs task is callable from the command line and executes unit tests on SauceLabs
   //
-  grunt.registerTask('saucelabs', ['connect', 'saucelabs-mocha']);
+  // grunt.registerTask('saucelabs', ['connect', 'saucelabs-mocha']);
 
   //
   // The test task is callable from the command line and executes the mocha task defined
   // in the Grunt config. This task executes the monorepo's test suite.
   //
-  grunt.registerTask('test', ['mocha']);
+  // grunt.registerTask('test', ['mocha']);
 
   //
   // The watch task is callable from the command line and executes the browserify:watch task
   // defined in the Grunt config. This task performs a build and then watches for changes
   // for instant update during development.
   //
-  grunt.registerTask('watch', ['browserify:watch']);
+  // grunt.registerTask('watch', ['browserify:watch']);
 
   //
   // The npm-publish task is callable from the command line and performs a publish operation

diff --git a/gulp/lib/allPackages.js b/gulp/lib/allPackages.js
@@ -0,0 +1,19 @@
+/*jslint node: true */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+//
+// allPackages is the global array of npm-publishable packages in this monorepo.
+// This is all folders inside the ./packages folder that start with the prefix
+// "basic-".
+//
+const PACKAGE_FOLDER = './packages';
+const allPackages = fs.readdirSync(PACKAGE_FOLDER).filter(fileName => {
+  const filePath = path.join(PACKAGE_FOLDER, fileName);
+  const stat = fs.statSync(filePath);
+  return stat && stat.isDirectory() && fileName.startsWith('basic-');
+});
+
+module.exports = allPackages;
diff --git a/gulp/tasks/browserify.js b/gulp/tasks/browserify.js
@@ -0,0 +1,126 @@
+/*jslint node: true */
+'use strict';
+
+const gulp = require('gulp');
+const gutil = require('gulp-util');
+const glob = require('glob');
+const babelify = require('babelify')
+const browserify = require('browserify');
+const watchify = require('watchify');
+const buffer = require('vinyl-buffer');
+const vinylStream = require('vinyl-source-stream');
+const sourceMaps = require('gulp-sourcemaps');
+const uglify = require('gulp-uglify');
+const allPackages = require('../lib/allPackages');
+
+//
+// Build the global buildList object for use in browserifyTask
+//
+function buildBuildList() {
+  const buildList = {
+    'build/tests.js': allPackages.map(pkg => `packages/${pkg}/test/*.js`)
+  };
+  allPackages.forEach(pkg => {
+    buildList[`packages/${pkg}/dist/${pkg}.js`] = [`packages/${pkg}/globals.js`];
+  });
+  buildList['packages/demos/dist/demos.js'] = ['packages/demos/src/*.js'];
+  return buildList;
+}
+const buildList = buildBuildList();
+
+const watchifyTask = function(done) {
+  browserifyHelperTask(true, done);
+}
+
+const browserifyTask = function(done) {
+  browserifyHelperTask(false, done);
+}
+
+const browserifyHelperTask = function(watch, done) {
+  let processedCount = 0;
+  let bundlerCount = 0;
+  let bundlers = [];
+
+  function bundleIt(bundler) {
+    bundler.bundler
+      .bundle()
+      .pipe(vinylStream(bundler.outputFile))
+      .pipe(buffer()) // Convert to gulp pipeline
+      .pipe(sourceMaps.init({loadMaps : true})) // Strip inline source maps
+      .pipe(uglify())   // Minimize
+      .on('error', gutil.log)
+      .pipe(sourceMaps.write('./')) // Relative to bundler.outputDir below
+      .pipe(gulp.dest(bundler.outputDir))
+      .on('end', function() {
+        gutil.log(`Processed ${bundler.source} and wrote ${bundler.outputDir}${bundler.outputFile}`);
+        processedCount++;
+        if (processedCount >= bundlerCount) {
+          if (watch) {
+            // Do not call task completion callback in the watch case
+            gutil.log('Now watching for changes...')
+          }
+          else {
+            done();
+          }
+        }
+      });
+  }
+
+  gutil.log('Preparing build...');
+
+  for (let key in buildList) {
+    let entries = [];
+
+    buildList[key].forEach(globItem => {
+      let a = glob.sync(globItem);
+      Array.prototype.push.apply(entries, a);
+    });
+
+    const props = watch ? {
+        entries: entries,
+        debug: true,
+        cache: {},
+        packageCache: {},
+        plugin: [watchify]
+      } : {
+        entries: entries,
+        debug: true
+      }
+
+    let bundler = browserify(props);
+    if (watch) {
+      bundler.on('update', function() {
+        bundleIt(this.bundlerData);
+      });
+    }
+
+    let bundlerData = {
+      bundler: bundler,
+      source: entries,
+      outputFile: key.split('/').pop(),
+      outputDir: key.substring(0, key.lastIndexOf('/') + 1)
+    };
+
+    // Attach bundlerData to the bundler object so we can fetch
+    // details about the bundler in the update event
+    bundler.bundlerData = bundlerData;
+
+    bundlers.push(bundlerData);
+  }
+
+  bundlerCount = bundlers.length;
+
+  bundlers.forEach(bundler => {
+    //
+    // Remember: we have .babelrc in the root specifying the ES2015 preset,
+    // and the babelify transform specified in package.json.
+    // This was necessary for the Grunt build. The following line is
+    // therefore unnecessary:
+    //
+    // bundler.bundler.transform(babelify, {presets: ['es2015']});
+
+    bundleIt(bundler);
+  });
+};
+
+module.exports = {browserifyTask: browserifyTask, watchifyTask: watchifyTask};