Using gulp.js isn’t always straightforward. Here are a couple of tips to help you out.
1. Things don’t run in sequence
With gulp.js tasks don’t run in the order you define them. In fact they run in concurrently to make the total execution faster.
If you however want run tasks in order, you can define dependencies like this:
In previous versions of gulp, you should have used something like gulp-sequence or run-sequence.
2. Watch carefully
When you watch for changes in files, make sure to only watch the files that change on a regular basis.
Otherwise running the gulp task in the command line will result in a slower tasks and high CPU / memory usage.
3. Gulp-inject
After concatenating and minifying CSS and JavaScript files, I wanted to find a way to dynamically add those files to the HTML page. gulp-inject was the plug-in that did the trick for me.
And this is the html part:
Next to html, it also supports jade, jsx, slm and haml.
4. Using bower?
When you’re using bower to manage your dependencies, main-bower-files will come in handy. Otherwise you’ll have to manually define which bower files you want to include.
5. Node + browsersync: possible but cumbersome
One of the most tedious parts was finding a way to make gulp work with nodemon (automatically restart node) and BrowserSync. The gulpfile from Hafiz Ismail was a great start and I made some small changes.
Conclusion
Hope you all taken something away from this post, if you have any remarks / comments, feel free to contact me on twitter.