Node.js + Gulp has quickly become one of our favourite combinations for frontend development tooling. Although this combination is very simple and powerful, it is sometimes hard to figure out exactly how you should be cooking up your gulpfile. If you are out of ideas or want to improve your gulp usage, check out these tips!
For a full project example, see https://github.com/tristola/gulpexample
Creating a simple web server with multiple proxies
It is a common practice to separate services and the UI to different layers. Different services are often running in different addresses or sometimes the user interface needs multiple services to combine data for a view. In production environment this is not a problem, but when you start to develop a single service or even just the user interface you might need to set up several services before you get started developing the application.
For example, if you have a web user interface project built by somebody who loves Apache Maven, your project structure will be project/src/main/webapp/.
What you can do here is create a separate directory for development where you add your gulpfile.js and symbolic links to the src/main/webapp folder.
https://gist.github.com/tristola/a8fa9001159ee8b30a32#file-gulpfile-js
Simple web project with jade templates and a minimal web server
In case you just need a simple web project with templates and live reload, here is an example Gulp file:
https://gist.github.com/tristola/07a8e8d72cd633f79867#file-gulpfile-js
The default task has two subtasks: jade and browser-sync. The former is using templates from template directory and data from data directory to create the HTML files in the public folder. The latter serves the static files from public folder to the browsers. I made a modification to the jade task to notify browser-sync of any files changed at runtime.
There is also a watch task for noticing changes to the files in the default task. You can do the same thing with Sass/Less or CoffeeScript.
Gulp-data is used to inject the JSON data from file into the stream.
Search for a seed project or create project from scratch – it’s easy with Gulp!
