Gruntfile.js for WordPress plugins
After writing out a
Gruntfile.js for the last several projects I finally dragged myself into creating a template instead of copying and pasting every time.
This one is specific to WordPress plugins, but only because it includes the
wp-i18n tasks. They take care of making sure that all i18n functions have the correct language domain and building the pot files. Next non WordPress project I build I'm probably going to start with this file and make a new template without the
js/src folder and concatenating into the
js/dist folder. But you can split into different files if needed.
js/dist/ with the same name, but a
SCSS files through SASS.
wp-18n: Builds a POT file from the PHP files to make the plugin easier to translate. It also will add the language domain to any i18n methods, but that has to be run manually.
watch: Watches a bunch of files and fires off tasks as they change so I don't have to remember.
Everything is in the
project which would create the files
project.min.js in the
cssName: Name of the CSS file created in
css/dist, and also the name of the parent SCSS file in
langDomain: Language Domain used for the i18n WordPress functions.
bugsURL: Address listed in the POT files created for issues
The Gruntfile makes a couple of assumptions about how the project is laid out. It's what I like, but could be changed pretty easily.
js/src and they're all concatenated to
js/dist/project.min.js. You can change the filenames under
SCSS files live in
css/src and are combined into
css/dist/style.css. Same thing, you can change the filename in
There are a couple of requirements needed in your
package.json file. I'm also leaving a template for that. It's just the dependencies for grunt.
Once you've put the
package.json files in your project run
npm i at console to take care of loading all the dependencies.
The package versions aren't critical. They just happen to be what was current when I installed them.