I’ve been maintaining a small site for a few years that I’ve recently converted from Express to hapi. One of the small pain points in the migration was Stylus support. Express has a Stylus “compiler” middleware function that dynamically compiles and caches requests for Stylus files. At the time, hapi did not have an equivalent plugin. So I set out to write a simple build script with Gulp.
I’m not really going to go into how to write a Gulp file here. There are many articles out there by better writers than I that explain it better. So for the sake of brevity, here is my complete “gulpfile.js” and let’s move getting everything working on Heroku.
My first thought was to just check in and deploy the generated files since that is easier. I don’t like that approach because it makes change sets appear much larger than they really are. Those generated files will change and be overwritten constantly, but those changes aren’t important; the changes to the source files are. With that rulled out, the only other option was to have Gulp run after the code has been deployed.
Reading through the documentation, I learned about the `postinstall` npm hook Heroku provides. It’s purpose is to provide a way to run some build scripts after deployment. Sound familiar? We want to run a Gulp task after our site has been deployed.
One quick caveat to this method: Heroku runs `npm install —production` which does not install anything listed in `devDependencies` from the “package.json” file. That means that “gulp” and all of the required plugins, need to be listed under `dependencies`for this to work.
Finally, update your “package.json” file to look like this
“start”: “node app”,
“postinstall”: “gulp default”
After the `push` to Heroku, you can run `heroku logs —tail` to check in on the Gulp task and make sure it finishes.