Merge branch 'release/v1.1.0'

* release/v1.1.0: v1.1.0 Added stylesheet preprocessor tests Removed baseUrl config as it isn't needed Fixed config references in package.json and gulpfile Updated README and CHANGELOG Fixed browserify watchify task so it can run in conjunction with browserSync
larsonjj · Aug 13, 2015 · 7919d98 · 7919d98
2 parents 667c93e + 10ee405
commit 7919d98
Show file tree

Hide file tree

Showing 7 changed files with 317 additions and 112 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### v1.1.0:
+#### date: 2015-8-13
+##### changes:
+* Added `entries` data to `package.json` that allows users to configure what browserify and stylesheet preprocessors look for. This can be used to create multiple `.js` bundles and `.css` files
+* Updated browserify, browserSync, and gulp.watch tasks to play better together and run in parallel. (Should improve dev server bootup)
+* Improved code coverage
+
 ### v1.0.1:
 #### date: 2015-8-7
 ##### changes:

diff --git a/README.md b/README.md
@@ -165,6 +165,16 @@ Folders that live within the `source` configured directory
 | shared  | Determines the folder name where your shared components reside (i.e. `src/screens/Index/shared`)
 | components  | Determines the folder name where your non-shared components reside (i.e. `src/screens/Index/components`)
 
+### Entry files
+Files that should be searched for and created by build tasks.
+File strings and [Globs](https://github.com/isaacs/node-glob) can be used to process desired file(s).
+Ex: `main**.js` will process all files that start with `main` and end with `.js`
+
+| Setting | Description |
+|---------|-------
+| js     | Tells browserify what file(s) to bundle and generate at your desired build target
+| css  | Tells your stylesheet preprocessor (Sass, Less, etc) what file(s) to generate at your desired build target
+
 ***Default configuration:***
 
 ```json

diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -58,7 +58,7 @@
     "mocha": "*"<% } %><% } %>
   },
   "scripts": {
-    "clean": "rimraf node_modules tmp build"
+    "clean-deps": "rimraf node_modules"
   },
   "engines": {
     "node": ">=0.12.0"
@@ -69,7 +69,6 @@
     "//": "Local Server Settings",
     "host": "127.0.0.1",
     "port": "3000",
-    "baseUrl": "/",
     "//": "Gulp Task Directories",
     "directories": {
       "source": "src",
@@ -80,6 +79,13 @@
       "screens": "screens",
       "shared": "shared",
       "components": "components"
+    },
+    "//": "Entry files",
+    "entries": {
+      "js": "index**.js"<% if (cssOption === 'sass') { %>,
+      "css": "index**.{sass,scss}"<% } else if (cssOption === 'less') { %>,
+      "css": "index**.less"<% } else if (cssOption === 'stylus') { %>,
+      "css": "index**.styl"<% } %>
     }
   }
 }
diff --git a/app/templates/gulpfile.babel.js b/app/templates/gulpfile.babel.js
@@ -30,6 +30,7 @@ let production = !!(argv.production);
 let watch = !!(argv.watch);
 let open = !!(argv.open);
 let dirs = config.directories;
+let entries = config.entries;
 let taskTarget = production ? dirs.destination : dirs.temporary;
 
 // Create a new browserSync instance
@@ -39,7 +40,7 @@ let browserSync = browserSyncLib.create();
 // Sass compilation
 gulp.task('sass', () => {
   let dest = path.join(__dirname, taskTarget);
-  gulp.src(path.join(__dirname, dirs.source, '*.{scss,sass}'))
+  gulp.src(path.join(__dirname, dirs.source, entries.css))
     .pipe(plugins.plumber())
     .pipe(plugins.sourcemaps.init())
     .pipe(plugins.sass({
@@ -56,7 +57,7 @@ gulp.task('sass', () => {
 // Less compilation
 gulp.task('less', () => {
   let dest = path.join(__dirname, taskTarget);
-  return gulp.src(path.join(__dirname, dirs.source, '*.less'))
+  return gulp.src(path.join(__dirname, dirs.source, entries.css))
     .pipe(plugins.plumber())
     .pipe(plugins.sourcemaps.init())
     .pipe(plugins.less({
@@ -71,7 +72,7 @@ gulp.task('less', () => {
 // Stylus compilation
 gulp.task('stylus', () => {
   let dest = path.join(__dirname, taskTarget);
-  gulp.src(path.join(__dirname, dirs.source, '*.styl'))
+  gulp.src(path.join(__dirname, dirs.source, entries.css))
     .pipe(plugins.plumber())
     .pipe(plugins.sourcemaps.init())
     .pipe(plugins.stylus({
@@ -114,57 +115,104 @@ gulp.task('imagemin', () => {
 });
 
 // Browserify Task
+let browserifyTask = function(entry) {
+  let dest = path.join(__dirname, taskTarget);
+  let customOpts = {
+    entries: [entry],
+    debug: true,
+    transform: [
+      envify,  // Sets NODE_ENV for better optimization of npm packages
+      babelify, // Enable ES6 features
+      resolvify // Allow for require()'s to search for custom folders other than node_modules
+    ]
+  };
 
-// Options
-let customOpts = {
-  entries: [path.join(__dirname, dirs.source, 'index.js')],
-  debug: true,
-  transform: [
-    envify,   // Sets NODE_ENV for better optimization of npm packages
-    babelify, // Enable ES6 features
-    resolvify // Enable module resolving for custom folders
-  ],
-  fullPaths: true // for watchify
-}
+  let bundler = browserify(customOpts);
 
-// Setup browserify
-let b = browserify(customOpts);
+  if (!production) {
+    // Setup Watchify for faster builds
+    let opts = _.assign({}, watchify.args, customOpts);
+    bundler = watchify(browserify(opts));
+  }
 
-if (!production) {
-  // Setup Watchify for faster builds
-  let opts = _.assign({}, watchify.args, customOpts);
-  b = watchify(browserify(opts));
-}
+  let rebundle = function() {
+    let startTime = new Date().getTime();
+    bundler.bundle()
+      .on('error', function (err) {
+        plugins.util.log(
+          plugins.util.colors.red("Browserify compile error:"),
+          err.message,
+          '\n\n',
+          err.codeFrame,
+          '\n'
+        );
+        this.emit('end');
+      })
+      .pipe(vsource(path.basename(entry)))
+      .pipe(buffer())
+      .pipe(plugins.sourcemaps.init({loadMaps: true}))
+        .pipe(gulpif(production, plugins.uglify()))
+        .on('error', plugins.util.log)
+      .pipe(plugins.sourcemaps.write('./'))
+      .pipe(gulp.dest(dest))
+      .on('end', function() {
+        let time = (new Date().getTime() - startTime) / 1000;
+        return console.log(
+          plugins.util.colors.cyan(entry)
+          + " was browserified: "
+          + plugins.util.colors.magenta(time + 's'));
+      });
+  };
 
-let browserifyTask = function() {
-  let dest = path.join(__dirname, taskTarget);
-
-  return b.bundle()
-    .on('error', function (err) {
-      plugins.util.log(
-        plugins.util.colors.red("Browserify compile error:"),
-        err.message,
-        '\n\n',
-        err.codeFrame,
-        '\n'
-      );
-      this.emit('end');
-    })
-    .pipe(vsource(path.basename('index.js')))
-    .pipe(buffer())
-    .pipe(plugins.sourcemaps.init({loadMaps: true}))
-      .pipe(gulpif(production, plugins.uglify()))
-      .on('error', plugins.util.log)
-    .pipe(plugins.sourcemaps.write('./'))
-    .pipe(gulp.dest(dest));
+  if (!production) {
+    bundler.on('update', browserifyTask); // on any dep update, runs the bundler
+    bundler.on('log', plugins.util.log); // output build logs to terminal
+  }
+  return rebundle();
 };
 
-if (!production) {
-  b.on('update', browserifyTask); // on any dep update, runs the bundler
-  b.on('log', plugins.util.log); // output build logs to terminal
-}
+gulp.task('browserify', function(done) {
+  return glob(path.join(__dirname, dirs.source, entries.js), function(err, files) {
+    if(err) done(err);
+    return files.map(function(entry) {
+      return browserifyTask(entry)
+    });
+  });
+});
 
-gulp.task('browserify', browserifyTask);
+// Default task
+gulp.task('watch', () => {
+  if (!production) {<% if (cssOption === 'sass') { %>
+    // Styles
+    gulp.watch([
+      path.join(__dirname, dirs.source, '**/*.{scss,sass}')
+    ], ['sass']);<% } else if (cssOption === 'less') { %>
+    gulp.watch([
+      path.join(__dirname, dirs.source, '**/*.less')
+    ], ['less']);<% } else if (cssOption === 'stylus') { %>
+    gulp.watch([
+      path.join(__dirname, dirs.source, '**/*.styl')
+    ], ['stylus']);
+    <% } %>
+
+    // Copy
+    gulp.watch([
+      path.join(__dirname, dirs.source, 'index.html'),
+      path.join(__dirname, dirs.source, dirs.assets, '**/*'),
+      '!' + path.join(__dirname, dirs.source, dirs.assets, 'images/**/*')
+    ], ['copy']);
+
+    // Images
+    gulp.watch([
+      path.join(__dirname, dirs.source, dirs.assets, 'images/**/*.{jpg,jpeg,gif,svg,png}')
+    ], ['imagemin']);
+
+    // All other files
+    gulp.watch([
+      path.join(__dirname, dirs.temporary, '**/*')
+    ]).on('change', browserSync.reload);
+  }
+});
 
 // Clean
 gulp.task('clean', del.bind(null, [
@@ -184,6 +232,18 @@ gulp.task('copy', () => {
     .pipe(gulp.dest(dest));
 });
 
+// BrowserSync
+gulp.task('browserSync', () => {
+  browserSync.init({
+    open: open ? 'local' : false,
+    startPath: config.baseUrl,
+    port: config.port || 3000,
+    server: {
+      baseDir: taskTarget
+    }
+  });
+});
+
 // Default task
 gulp.task('default', ['clean'], () => {
   gulp.start('build');
@@ -192,75 +252,25 @@ gulp.task('default', ['clean'], () => {
 // Build production-ready code
 gulp.task('build', [
   'copy',
-  'imagemin',<% if (cssOption === 'less') { %>
-  'less',<% } else if (cssOption === 'sass') { %>
-  'sass',<% } else if (cssOption === 'stylus') { %>
-  'stylus',<% } %>
-  'browserify'
+  'imagemin'<% if (cssOption === 'less') { %>,
+  'less'<% } else if (cssOption === 'sass') { %>,
+  'sass'<% } else if (cssOption === 'stylus') { %>,
+  'stylus'<% } %>,
+  'browserify',
+  'browserSync'
 ]);
 
 // Server tasks with watch
 gulp.task('serve', [
     'imagemin',
-    'copy'<% if (jsOption === 'browserify') { %>,
-    'browserify'<% } %><% if (cssOption === 'less') { %>,
+    'copy'<% if (cssOption === 'less') { %>,
     'less'<% } %><% if (cssOption === 'sass') { %>,
     'sass'<% } %><% if (cssOption === 'stylus') { %>,
-    'stylus'<% } %>
-  ], () => {
-
-    browserSync.init({
-      open: open ? 'local' : false,
-      startPath: config.baseUrl,
-      port: config.port || 3000,
-      server: {
-        baseDir: taskTarget,
-        routes: (() => {
-          let routes = {};
-
-          // Map base URL to routes
-          routes[config.baseUrl] = taskTarget;
-
-          return routes;
-        })()
-      }
-    });
-
-    // If running in dev mode
-    if (!production) {
-<% if (cssOption === 'sass') { %>
-      // Styles
-      gulp.watch([
-        path.join(__dirname, dirs.source, '**/*.{scss,sass}')
-      ], ['sass']);<% } else if (cssOption === 'less') { %>
-      gulp.watch([
-        path.join(__dirname, dirs.source, '**/*.less')
-      ], ['less']);<% } else if (cssOption === 'stylus') { %>
-      gulp.watch([
-        path.join(__dirname, dirs.source, '**/*.styl')
-      ], ['stylus']);
-      <% } %>
-
-      // Copy
-      gulp.watch([
-        path.join(__dirname, dirs.source, dirs.assets, '**/*'),
-        '!' + path.join(__dirname, dirs.source, dirs.assets, 'images/**/*')
-      ], ['copy']);
-
-      // Images
-      gulp.watch([
-        path.join(__dirname, dirs.source, dirs.assets, 'images/**/*.{jpg,jpeg,gif,svg,png}')
-      ], ['imagemin']);
-
-      // All other files
-      gulp.watch([
-        path.join(__dirname, dirs.temporary, '**/*'),
-        '!' + path.join(__dirname, dirs.temporary, '**/*.js')
-      ]).on('change', browserSync.reload);
-
-    }
-  }
-);
+    'stylus'<% } %>,
+    'browserify',
+    'browserSync',
+    'watch'
+]);
 
 // Testing
 gulp.task('test',<% if (testFramework === 'none') { %> ['eslint']);<% } else { %> (done) => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "generator-neopolitan",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A generator for creating React applications. Helps you harness the power of your favorite tools: React, React-Router, Baobab, ES6/2015, Gulp, and much more!",
   "keywords": [
     "yeoman-generator",