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

Requirements

 

Grunt Plugins

Example:

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.



Comments

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.

        https://github.com/wesleytodd/YeoPress

Leave a Reply

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