If you found this article through Google and already know what Glitch and gulp are, feel free to skip the introduction.
I’ve been a huge fan of Glitch ever since it came out. I have quite a few projects on Glitch, Botwiki, a site I’ve been working on for the past two years is heavily integrated with it, and I was featured in the first Creator Spotlight.
Yep, big fan here.
Most of my projects have been heavily focused on the server side, but I’ve been meaning to transfer my front-end setup to Glitch as well to get a faster start with my smaller projects.
Now, I have a pretty custom setup; I prefer LESS over SASS, gulp over grunt/webpack/etc, and the list of my personal preferences goes on, but this blog post is not really about that.
How to run gulp on Glitch¶
You’re probably familiar with gulp and are wondering how to get it to run on Glitch. It turns this is pretty simple and this little guide will save you some of the pain I dealt with when setting things up for myself.
There is an older thread on the Glitch support forum, feel free to follow the instructions there. My guide will show you how to run gulp using the command line on Glitch.
First, install gulp and all the gulp plugins you need using the installer that’s accessible when you open the package.json file, and create your gulpfile.js file.
Perfect, you’re pretty close to being done. The real challenge here is that Glitch automatically saves your files as you type. If you’re in the middle of writing your JavaScript code, the incomplete code can cause errors and gulp will shut down.
To avoid this, you just need to suppress the errors.
function swallowError (error) {
console.log(error.toString());
this.emit('end');
}gulp.task('scripts', function() {
return browserify({ debug: true })
.transform("babelify", {presets: ["es2015"]})
.on('error', swallowError)
// [...]And that’s it! Feel free to check out my gulpfile.js file. As I said earlier, I have a pretty specific setup and you definitely don’t need to copy everything, just focus on the error-handling part.
Once you’re finished with your gulpfile.js, you can open the command line through your project’s Advanced Options and use gulp as you’re used to.
