This is my starter template for prototyping and static projects.
- Gulp | Build System
- BrowserSync | Development Server
- Sass | CSS
- Jade | HTML
- Mocha | Testing
It also compresses images and builds custom icon-fonts.
Feel free to change, edit, remove or add to your build. This is only a starting point. I tried to make it as modular and non-opionated as possible. But I'm sure there are places I could have done better.
npm install && bower install.
Afterwards you will have a completely modular Gulp build system. This structure was heavily inspired by: this article. I can't recommend it enough.
There are several tasks you can run to manage your build. To run all the tasks, watch files and start a server:
The other tasks are in
- Runs all tasks but doesn't start local server
- Deletes the
- Runs Clean and Default, then will push branch to gh-pages.
- Runs all unit and functional tests in tests/ folder.
Alt. Testing Setup
- If you prefer to have your tests running in a separate window, you can run
gulp serve:notestin your main terminal window, and
gulp test:watchin a separate window to get the same effect.
Here's some details about the build:
Browserify is configured to run on
It also exposes a global called shared in standalone mode. You can easily remove this
in the browserifyOpts obj. But I've found it handy. All configuration for this
task can be found in
The task will compile a bundle.js and bundle.min.js file in your
- TODO: Consider switching compression to a node-env dependency instead.
- TODO: Consider whether its better to open up src to multiple browserify builds.
Includes a separate sub-task for modernizr so you can load it in the head, from bower. It will compress the file. Feel free to replace this with a custom build if you choose.
Will compile a separate vendor folder from any files in the included js/vendor/folder.
TODO: Considering switching to my preferred linter: eslint.
All CSS is run through the RubySass module. If you're interested in my current default CSS layout, check out https://github.com/seethroughtrees/styles-seed. You can pretty much copy it right in.
All CSS is compiled to
dist/css/main.css. However, it will compile any top-level
scss file, so you can have several if you want.
Compression is handled by gulp-csso. I love the way they approach compression.
Nothing better than Autoprefixer. I don't plan to ever write CSS without it again.
All HTML is currently handled with Jade. Another thing that should easy to switch out, and depending if anyone uses this repo, something I might consider doing myself.
But I do find prototyping with Jade is the most pleasant experience of all of them.
This build uses a pretty common structure and something I've been using on all of my prototyping projects.
Images are compressed with imagemin and put into their respective folders.
I have configured a scss file for icon-fonts. To use it, just add any svg file
img/icons/ folder and it will recompile the font to
Font configuration is handled in the
It uses a template in the
app/scss/templates folder. That file should only
be edited if you know exactly what you want from it.
That template generates an SCSS file
file is generated and should not be edited.
Testing includes 2 sub-tasks: unit and functional. Both are run by mocha and chai. Only one is in node and one is in the browser. They are split in the test folder respectively.
For sanity, both suites run on
gulp serve and
gulp test. However, only
test:unit runs on watch.
You can also run
gulp test to run all tests.