This project:

1. puts a number of useful front-end utilities in a task runner,
2. keeps those dependencies tracked by package managers so they're under version control and can be easily updated, and
3. provides a flexible, modifiable workflow in one place that produces an uncluttered front-end setup.

npm install
bower install
gulp rebuild
gulp

You'll need npm and a global install of gulp and Bower. You'll also need Ruby and a global install of Sass (gem install sass).

In the root directory:

npm install
bower intsall

This installs all the Node modules and Bower components from package.json and bower.json respectively.

gulp rebuild

The rebuild task will process the Bower dependencies listed with the parameters supplied in gulp/config.js.

You can then run the default task, gulp, which will build the project and watch the specified CSS and JS files. See Usage for a full list of gulp tasks.

packageType
Specifies where the main Bower files of a package should go, used by config.bower.dest

config.sass
Used by /tasks/sass.js and /tasks/watch.js; defines src and intermediate dest for Sass files for watch and build purposes

config.js
Used by /tasks/watch.js; defines js files for watch purposes

config.bower
Used by /tasks/dependencies.js; determines where main Bower files get moved for each Bower package. Main bower files are usually specified by a package's bower.json in the "main" field.
.name: package name
.rename: filename to rename
.dest: intermediate destination, as specified in the packageType object
.path: specifies the path of the main Bower files within the Bower package

Specifies Webpack configuration. Input, output, and UglifyJS options are specified here. jQuery is also loaded here since it can be handled via the ProvidePlugin plugin.

gulp
Runs watch

gulp watch Runs build and watches Sass and JS files

gulp build / gulp webpack
Builds Sass and JS through Webpack

gulp rebuild / gulp dependencies
Processes all dependencies as defined by config.bower

gulp sass
Processes Sass files

gulp deploy / gulp compress
Runs build with production flags for minification and concatenation

• Front-end libraries loaded by Webpack need to be added as development dependencies to Bower or npm, then managed in /gulp/config.js, /gulp/webpack.config.js, and /src/entry.js or some combination of the three. This is currently somewhat byzantine because there isn't an ideal workflow yet.

• The Webpack sass-loader is based on node-sass, which is based on libsass, which doesn't offer full support for all Sass features. Right now, this means that Susy breaks. Currently relying on gulp-ruby-sass to do the work instead, which means the CSS is built to an intermediate directory and then passed through Webpack.

• LiveReload requires the LiveReload browser extension to work.