A WordPress Theme Development, Build and Deployment Workflow with Node.js, Bower and Grunt.
You need to have Node.js, Bower and Grunt installed for this setup to work.
bundle
npm install
bower install
Copy servers.config.json.sample to servers.config.json and fill in with you server credentials and installation paths.
Even if you are not going to deploy the theme, just create servers.config.json to avoid the error Error: Unable to read "servers.config.json" file (Error code: ENOENT).
While you are developing the theme run grunt develop in your terminal. This will compile your SASS files, watch for any file changes and refreshes the browser through Livereload when any file changes.
Run grunt build, to build your theme. During build the CSS and JS files are concatenated, minified and revision-ed. This is done using Grunt Usemin task.
Follow the exact tags and attributes shown below to include js and css files. Since we are replacing the get_template_directory_uri() with a string search and replace during the build process.
In header.php
<!-- build:css css/main.min.css -->
<link rel="stylesheet" href="<?php printf(get_template_directory_uri()); ?>/bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="<?php printf(get_template_directory_uri()); ?>/css/main.css">
<!-- endbuild -->In footer.php
<!-- build:js js/main.min.js -->
<script src="<?php printf(get_template_directory_uri()); ?>/js/plugins.js"></script>
<script src="<?php printf(get_template_directory_uri()); ?>/js/main.js"></script>
<!-- endbuild -->After you setup the credentials in servers.config.json, you can deploy your theme to your server with the grunt task grunt deploy --target=dev. If you don't specify any target by default the server configuration of ‘dev’ will be used.
We have added support for Semantic Versioning. The primary place where theme's version is stored is in package.json. It's easier to change the version with npm-version. Once you update your theme's version in package.json, on the next run of grunt develop or grunt build, style.css will have the new version.
Licensed under GPL v3 or later. A copy of the licence is included.