For quite some time now I have been using gulp. Gulp is truly amazing and saves me a bunch of time.

Here is my basic setup. This is intended for app or website development. This is a bare bones structure and assumes we're building a vanilla project without any frameworks. Including frameworks will probably change your gulp setup, but you will definitely be able to use this setup as a starting block. This gulp setup will do the following:

Combine and minify your javascript into a single app.js file.

Compile your stylesheets to a single minified app.css file (using sass).

It will watch all your javascript and sass files, as well as your HTML for changes and live reload your browser on save.

It will manage errors by notifying us with system beeps while making sure our gulp process doesn't break.

I'll explain each step below. If you want to check out the code here's the link to the full 

I'm assuming you know node, gulp, bower and sass.

You have node, npm and ruby (with sass gem) installed globally.

You have a dev environment setup (I'm using wamp).

You have a LiveReload plugin installed for your browser (

You know how to use the command line, install node and bower packages and can run a gulp task from it.

Here we include all our dependencies for use in our gulp file.

Here we declare a simple error handling function. This function will create three system beeps on error and also log the error message with some basic text highlighting for easier reading.

We are using uglifyjs (instead of concat and uglify) because it is simpler to use. Note that plumber needs to be the first pipe. We attached our error handler so in case we make a JS error ;) we will hear three beeps and our gulp process doesn't just break. After our plumber pipe we do the minification and at very last we attach a livereload pipe so that we don't have to manually refresh our browser.

Pretty much the same procedure as with the JS task. To note here is that we are using ruby-sass so that we can pass in the compressed argument and also a custom cache path (just keeps things cleaner). As with JS also attach plumber and livereload.

We don't minify our HTML, that is quite unnecessary unless you're building a static site. However, we definitely want to attach a livereload pipe as this markup is most probably the one piece of code we'll touch on very often (definitely don't want to refresh our browser manually for this).

This is our primary (default) task. I called it "yo" because we're hip that way. Note that the very first thing needs to be the 

 command. For all the tasks we're watching we want to have livereload capabilities. The rest should be straight forward. Just watching certain files for changes and then running the tasks we specified above.

Last but not least, a build task. Why? Sometimes we just want to build without watching…

8. Putting it all together (gulpfile.js):

To run our setup all we need to do is run:

After that we open Chrome or Firefox and hit the LiveReload button so that our LiveReload server does its job. Happy coding! :) That's it, hope it helps! It surely makes my life a whole bunch easier. For more info check out the 