rath3r / animate

Simple animate setup with gulp

Quick Gulp development setup

A quick setup for using Gulp to develop prototypes and flat file sites. A tutorial on tutsplus was used for some pointers.

npm init was used to create the package.json file.

Use npm install to setup.

bower init was used to create the bower.json. Install the sites css and js dependancies using bower install. Don't forget the --save option on bower install to save new dependancies in the bower.json.

Features

Connect

A server is created using gulp-connect which has watch and livereload configured.

Clean

Gotta clean the dist before building.

Less

Less for the styles although Sass could be installed just as quick.

npm install gulp-sass --save-dev

Twig

Rather than just using .html files twig is being used for templates.

Concat

Currently using concat to pull all the javascript together. Maybe something like coffee could be the way forward.

Bootstrap

For quick prototyping Bootstrap has been added via bower.

Troubleshooting

Unexplained error on startup

Occasionally if the server has not been shutdown correctly you will get an error the next time you run gulp. To fix this list all the processes running on the target port and kill the node processes.

For example:

$ lsof -i tcp:8000
COMMAND   PID    USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    16552  rath3r   11u  IPv4 0xffffff8022458da8      0t0  TCP *:hbci (LISTEN)
kill -9 16552