This is a boilerplate WordPress project that supports a development-to-production workflow using Grunt.
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains what it is and what it does.
Once installed, Grunt will include all plugins and depencies for this project as defined in pacakge.json.
If it looks like there are a crap ton of tasks in this project, it's because there are. These are tasks I find useful for nearly project I work on which is why they are included. Don't like 'em, take them out. There are probably some tasks you think are indepensible and should be in here. Go for it, roll your own. The point is not to be dogmatic with a specific workflow, but what works best for you.
These are what are currently available.
Command: grunt
What it runs: connect and watch
What it does: connect will start a server and open for you in a new browser window. watch looks for file changes and automatically refreshes the browser window for you.
Command: prod
What it runs: connect:prod
What it does: This runs another connect command that starts a new server and open a new browser window that allows you to preview your production build.
OK, this gets a little funky. What I would like to do here is have connect start a PHP-friendly server in order to view my working WordPress installation, but it isn't there yet. So, for now, I recommend running MAMP and running a typical WordPress installation before running this command. It's not perfect, but does work.
Here is a workaround using wp_enqueue_script if that's your flavor.
What it runs: php:dev and watch
What it does: Connects to a PHP server. This is necessary if we are working with PHP files in the development directory since connect cannot process PHP things like includes.
What it does not do: This is not the same as MAMP, which includes MySQL and phpMyAdmin. This task only allows us to write with PHP but does nothing for databases.
Command: process
What it runs: concat, uglify, sass, autoprefixer, cssmin, modernizr, imagemin
What it does: This command prepares all the files in the development directory for production. Here is a breakdown of everything it does:
concat: Concatenates all Javascript files into a single output fileuglify: Minifies the output Javascript filesass: Processes all Sass files into a single output fileautoprefixr: Runs Autoprefixr on the output CSS filecssmin: Minifies the CSS output filemodernizr: Produces a minified custom Modernizr file based on the Modernizr features used in the projectimagemin: Optimizes files in theimagesdirectory to their smallest size
Command: move
What it runs: copy
What it does: This moves your processed and optimized files from the development directory to production.
Command: css
What it runs: sass, autoprefixer, cssmin
What it does: This command allows us to process just our SASS files instead of the whole kit and kaboodle like process does.
Command: js
What it runs: concat and uglify
What it does: This command allows us to process JS files separately from everything else.
What it runs: svgstore
What it does: This command merges SVG files in the development directory into a single defs file, according to Chris Coyier's SVG icon system.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Please lint and test your code.