Assembling a frontend stack part 1: Gulp.js
Edit: Some of the material in the Assembling a Frontend Stack posts is outdated. Specifically, I no longer use Bower in any of my projects.
This is not as easy as it used to be
gulp is a great build tool (lowercase "g" seems to be correct, except in their logo, which is confusing).
What about Grunt?
gulp's configuration file is unapologetically code. gulpfile.js is a script that utilizes gulp's simple API to string plugins together. You would think that configuring with code would mean more complexity, but in my experience it's just the opposite. For a developer, it's more clear, more concise. It's usually faster too, because files are streamed in memory between plugins, not written to disk to be read by the next plugin.
gulp seems more flexible as well. In the end, I switched from Grunt to gulp because I wanted to do something simple with Handlebars templates (just wrap the compiled template in module.exports = ... ;). The available Grunt plugins wouldn't do it right (IMO), but it was simple to write a gulpfile that did exactly what I wanted.
Gimme some config
In the posts that follow, we will assemble a full frontend stack using gulp.js. The frameworks and libraries used were chosen because they are commonly used, not necessarily because I think they are the perfect choice among competing options.
We will use:
- Javscript modules in separate files using CommonJS; Browserify to assemble them
- Backbone.js for our frontend "framework"
- Handlebars for templating
- JSHint for code linting
- Bower for frontend dependency management
- Less for our css precomiler
- Bootstrap for our design framework
- gulp to pull it all together
See the finished files in my github repo for these posts.
In part 3 we will add Handlebars and JSHint to our gulp build
In part 4 we will incorporate Less, Bootstrap, and automatic rebuilding with gulp.watch and livereload