WordPress Development with Roots (Bootstrap, SASS/LESS) and Grunt



Grunt Plugins


npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev


Use with SublimeText

For a faster workflow, I use SublimeText.


Additional Requirements


Build System

Build systems make it easier to compile everything (like your Grunt) upon saving, without having to enter code in vim.

Here’s a sample Build System (to create a new one: Tools > Build System > New Build System) to use with Grunt:

"cmd": ["grunt", "default"],
"selector": ["Gruntfile.js"],
"path": "/usr/local/bin:/usr/local/sbin:/Users/YOURNAME/.rvm/gems/ruby-2.0.0-p0/bin",
"working_dir": "${project_path:${folder}}",
"osx": {
"cmd": ["grunt", "default"]

** Make necessary adjustments on your path if you’re using something different.


Auto-upload on server with SFTP

Use SFTP with SublimeText to automatically reflect all changes you make locally to the test server.


3 responses to “WordPress Development with Roots (Bootstrap, SASS/LESS) and Grunt”

  1. Nice. Found this writeup looking for Grunt workflow with Sublime Text. Although for the latter (SFTP), if resource is there, I’d rather use Git/git-hooks =)

    1. I use git with my projects manually, although SFTP has another package that has Git too. Haven’t tried it yet though!

      1. Cool. Last year, I was using this fork https://github.com/stechico/wordpress-skeleton — it does the job. But currently, I’m looking into a Yeoman’s YeoPress and seeing if that greatly increases efficiency for WP Dev.


Leave a Reply

Your email address will not be published. Required fields are marked *