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 -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
- Download this zip
- Extract zip into desired directory of project (wordpress example:
/wp-content/themes/<theme>
) - Resolve any conflicts with existing project files
- 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
- cd into your project directory (open terminal from PhpStorm)
- 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
- Navigate to your project directory and run
grunt
orgrunt -v
for more details - 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 compressesbuild.less
intobuild.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.
- Uncomment "production" portion within
less.js
anduglify.js
tasks - Modify "production" target tasks to suite your needs
- Possibly a different folder structure in production
- Additional task options
- etc
- Change
./grunt/concurrent.js
tasks fromless:dev
&uglify:dev
toless: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.