This grunt setup will give you:

• Simultaneous task running
• Faster website rendering
• One place source references
• Simple deployment
• Pretty console output for task execution times
• System notifications (optional)

If you have any questions feel free to ask. [email protected].

Npm

npm -v  # should output a version number

Install the Grunt command line interface

npm install -g grunt-cli

Make sure grunt works globally

grunt -v
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started

Ignore the fatal error - that's not relevant yet

1. Download this zip
2. Extract zip into desired directory of project (wordpress example: /wp-content/themes/<theme>)
3. Resolve any conflicts with existing project files
4. Verify the following file structure

./_assets
    ./css
        ./src
            stylesheet.less
            anotherstylesheet.less
            ...
    ./js
        ./src
            sourcefile.js
            anothersourcefile.js
            ...
./grunt
    aliases.yaml
    concat.js
    concurrent.js
    less.js
    notify.js (optional)
    uglify.js
    ... any tasks you want
gruntfile.js
package.json

1. cd into your project directory (open terminal from PhpStorm)
2. Run npm install (make sure package.json is in theme dir)

• .less files in _assets/css/src will be compiled into _assets/css/build.min.css
• .js files in _assets/js/src will be compiled into _assets/js/build.min.js

1. Navigate to your project directory and run grunt or grunt -v for more details
2. Watch as grunt does it's magic

• The concat.js task concatenates all .less files within _assets/css/src into _assets/css/build.less
• The less.js task compresses build.less into build.min.css (this is the only stylesheet you need to reference)
• The uglify.js task concatenates and compresses all .js files within _assets/js/src into _assets/js/build.min.js
• concurrent.js specifies what tasks to run synchronously, in what order, etc

Ignore this unless you want a different development environment than the live website.

1. Uncomment "production" portion within less.js and uglify.js tasks
2. Modify "production" target tasks to suite your needs
   • Possibly a different folder structure in production
   • Additional task options
   • etc
3. Change ./grunt/concurrent.js tasks from less:dev & uglify:dev to less:production & uglify:production
   • Please note that "dev" and "production" are simply target names and are not strict naming requirements

See wiki

This project is licensed under the MIT License. See the LICENSE.md.

• https://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/
• http://gruntjs.com/getting-started