Some boilerplate code for static site generation
JavaScript HTML CSS
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.
content
dist
src
test
.bowerrc
.gitignore
LICENSE
README.md
bower.json
gruntfile.js
karma.conf.js
package.json

README.md

static-site-boilerplate

Some boilerplate code for static site generation

How to use this?

  1. Clone this repository git clone https://github.com/bdadam/static-site-boilerplate
  2. Install node dependencies npm install
  3. Install bower dependencies bower install
  4. Simply run grunt build to see that everything works

How to work with this?

You can run grunt dev while developing. This starts a new web server on port 3000 (http://localhost:3000/). After every change the affected files are regenerated.

Available Grunt tasks

  1. grunt - default task: build everything and then whatches for changes and regenerated the affected files
  2. grunt build - builds everything
  3. grunt clean - cleanup
  4. grunt assemble - generates html with Assemble
  5. grunt less - generated css file(s) from less files
  6. grunt sass - generated css file(s) from scss files
  7. grunt uncss - removes unnecessary css rules
  8. grunt requirejs - generates JavaScript files with RequireJS (or Almond)
  9. grunt webpack - generates JavaScript files with WebPack - uses CommonJS format
  10. grunt hashres - computes hash code for static resources (aka cachebusting)
  11. grunt connect - starts web server and stops it automatically when all the other tasks finished
  12. grunt watch - checks for file modifications and runs the appropriate tasks
  13. grunt dev - runs a complete build and then waits for modifications (watch)

Karma support (JavaScript unit testing)

  1. grunt karma:dist - runs JS unit tests in Chrome, Firefox, IE and PhantomJS
  2. grunt karma:dev - runs JS unit tests in PhantomJS only

All tasks accept a --dev flag, which disables many optimizations (minification), enables source maps, etc. This should only be used during development.

What is included?

  1. Static site generation with Assemble
  2. Generating and minifying a single CSS file with Less
  3. Generating and minifying a single JavaScript file with RequireJS or WebPack
  4. Linting JS files with ESlint
  5. Unit testing for JavaScript with Karma
  6. Generating hash (cache buster) for JS and CSS files
  7. Automatic regeneration and Liverload during development

Who is using this boilerplate?