If you've never used Grunt before, here's a great tutorial to teach you the basics.
Changes to your Gruntfile only effect the local site
Before we begin, it's important to note that any tasks you add to your Webhook site's Gruntfile are only run locally. Once your code hits our live servers we run a seperate build operation against your site when it needs to be rebuilt (for example, when an article is saved). This means you should never use Grunt tasks to dynamically read template code, instead use it only for preproccessing tasks like minifying files, copying or cleaning directories and other more common Grunt tasks.
Customizing your Gruntfile.js and Node packages
Every Webhook site comes with a
Gruntfile.js file located in its root folder. In it you are welcome to add your own tasks and perform actions as you see fit to help out your development workflow. We've siloed out our own tasks so you've got a clean area that should never be changed by our own update process.
If you do add tasks you'll likely also add to your
package.json file as well. Again, you're welcome to add whatever scripts you need to help in your local environment, but know that these scripts will not be installed or run on the live build servers.
wh updateis run during the Webhook upgrade process we change the package.json file and re-install any Node modules. If you've made changes to these files, you might want to backup your work just in case our update script gets overzealous.
The following is an example of an extended Gruntfile used in the Webhook preprocessor theme. Basically it watches for changes to the
coffee directories and then compiles those files into
First we need to add the Node modules we plan on using to our
package.json file. In this case, it's the sass, less and coffee modules.
// We need to add these to the bottom of our package.json file "grunt-contrib-sass": "~0.7.3", "grunt-contrib-less": "~0.11.2", "grunt-contrib-coffee": "~0.4.0"
Then we set up a Gruntfile to watch for changes.