🔥 Boilerplate for rapid front-end component development using Gulp & Browserify
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.bowerrc
.editorconfig
.eslintrc
.gitignore
README.md
bower.json
gulpfile.babel.js
package.json

README.md

Browserify/Gulp Boilerplate

The objective of this boilerplate is to provide a quick jumping-off point to start developing standalone UI components and prototypes.

Bundling

The project uses @zoubin's gulp-watchify-factor-bundleto abstract the process of transforming browserify entries that get split off from the common browserify bundle task by the factor-bundle plugin. (Unfortunately, using watchify hasn't worked for me yet using this implementation, so Gulp will rebundle everything using a regular gulp.watch task.)

factor-bundle checks all entries defined in the browserify config and bundles any modules that are shared between these entries into a common.js file.

Script loading

The boilerplate assumes you'll be developing UI components and templates to display them (in isolation, and alongside other components to form mockups of complete pages.

In your HTML, include common.js, then include a main app.js file which will check for the presence of these components on the page and asynchronously load their associated functionality with the scriptjs module (it's handles dependencies better than jQuery's $.getScript).

(Another approach to the currently-implemented pattern is to use partition-bundle, which is similar to factor-bundle, but it differs because it can dynamically include external scripts using require() and a defined module name determined at build-time. The components could be written as CommonJS modules instead of being exposed globally after being loaded. Unfortunately, the documentation is sparse and I decided against using partition-bundle for the time being. Sorry I've polluted the global scope.)

CSS

The recommended naming convention for components is borrowed from @necolas, and is a modification of traditional BEM syntax:

.Component
.Component--modifier
.Component-child
.Component-child--modifier

Along with the following classes to control appearance, state, and event bindings that can be added to any block or element:

.u-utility-name
.is-state
.js-behaviour-hook

Generally, the thoughts summed up in this wonderful article should guide your CSS authoring.

PostCSS is used for autoprefixer and for post-compile optimizations using cssnano. You can add other processors as needed, like a BEM linter or statistics provider.

Scut (Sass-CSS Utitilies) is included, which eases CSS development by providing a solid collection of mixins to take care of common CSS patterns. Scut can be easily removed by uninstalling the Bower package (but I've found it to be invaluable).

Jade

The index.jade file is where you can display a list of all your components or pages, so that other developers can preview them.

Gulp takes care of some Jade-related things for us:

  • Adds all files found in the html/mixins directory to an html/_mixins.jade file, so you can keep your mixins separated, but only include one file in your base layout to access them all.
  • After generating your pages which may include components, adds a line to extend the default jade layout to the top of the component templates, so that the generated HTML yields a standalone page with all the required scaffolding.

Gulp tasks

Build, watch, spin up a dev server on port 9001

$ gulp

Build without any optimizations

$ gulp build

Build to production environment

$ gulp build --deploy


MIT License © Jon Scott Clark

MIT License © Bin Zou