A boilerplate for the front-end, built based on projects I've built and large sections pinched from elsewhere - including, but not limited to:
Prerequisite | How to check | How to install |
---|---|---|
Node.js 0.12.x | node -v |
nodejs.org |
gulp >= 3.8.10 | gulp -v |
npm install -g gulp |
Bower >= 1.3.12 | bower -v |
npm install -g bower |
- gulp build script that compiles both Sass and Less, checks for JavaScript errors, optimizes images, and concatenates and minifies files
- BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
- Bower for front-end package management
- asset-builder for the JSON file based asset pipeline
- wiredep Automatically inject Sass and Less dependencies from Bower into the main stylesheet.
- jshint-stylish Stylish reporter for JSHint. (Get told off when yo' JavaScript is sloppy!)
- EditorConfig Maintain consistent coding styles between different editors and IDEs. (Enforce indent style, spaces or tabs etc.)
From the command line:
- Install gulp and Bower globally with
npm install -g gulp bower
- Navigate to the theme directory, then run
npm install
- Run
bower install
You now have all the necessary dependencies to run the build process.
gulp
— Compile and optimize the files in your assets directorygulp watch
— Compile assets when file changes are madegulp --production
— Compile assets for production (no source maps).
Need a local http server to try it out?
- Install once with
npm install http-server -g
- Start with
http-server
To use BrowserSync during gulp watch
you need to update devUrl
at the bottom of assets/manifest.json
to reflect your local development hostname.
For example, if your local development URL is http://project-name.dev
you would update the file to read:
...
"config": {
"devUrl": "http://project-name.dev"
}
...
The default is http://127.0.0.1:8080
which should work with the default http-server
address.
bower install --save package-name
or add it tobower.json
.gulp
You're done! (Assuming the packages bower.json
file is correctly set up).
More info - Bower docs.
Contributions are welcome from everyone. We have contributing guidelines to help you get started.