Using Grunt
Grunt is a very powerful command line tool for processing files on your development machine.
For example, it can compile a .less
file into .css
, then concatenate several .css
files into a .bundle.css
file, then minify (compress) that bundle into a .bmin.css
file…
Grunt can also be run as grunt watch
, in which case it will watch changes to files on disk and automatically process them as soon as they change.
The configuration instructions for grunt are in the Gruntfile.js
file, which is located at the root of your project. You may also have similar files for individual skins or plugins.
Setting up Grunt:
- first, install NodeJS on your system (http://nodejs.org), which includes the
npm
tool. - then switch to the b2evolution folder (where the
Gruntfile.js
resides) and install (locally in this dir) everything that is needed:- just type
npm install
to install all packages already listed in thepackage.json
file - (you could also type
npm install xxx
to install packages explicitly but this probably would not get you the version that is meant to be used by b2evolution)
- just type
- then, in order to be able to invoke
grunt
on your system, typesudo npm install -g grunt-cli
. This will make grunt available from the Command Line Interface.
ONCE IN A WHILE:
- run
npm update
to update all your packages
In order to use Sass:
- Make sure Ruby is installed on your system (should be preinstalled on MacOSX. On windows: http://rubyinstaller.org)
- Type:
sudo gem install sass
Using Gunt
- type
grunt
(in the root dir) to run all the default tasks - type
grunt xxx
where xxx is a specific task name - type
grunt watch
and grunt will start listening for file edits and run automatically
Note for devs:
When adding new plugins to the Gruntfile.js
, use for example npm install grunt-contrib-less --save-dev
to update the package.json
file with the new plugin reference.
Checking versions:
$ npm list --depth=0 | grep grunt
├── grunt@0.4.5
├── grunt-autoprefixer@3.0.3
├── grunt-contrib-concat@0.4.0
├── grunt-contrib-cssmin@0.10.0
├── grunt-contrib-less@0.10.0
├── grunt-contrib-sass@0.8.1
├── grunt-contrib-uglify@0.4.1
├── grunt-contrib-watch@0.6.1
├── grunt-markdown@0.7.0
└── grunt-sass@1.2.0-beta
$ npm version
{ http_parser: '1.0',
node: '0.10.28',
v8: '3.14.5.9',
ares: '1.9.0-DEV',
uv: '0.10.27',
zlib: '1.2.3',
modules: '11',
openssl: '1.0.1g',
npm: '1.4.9',
b2evolution: '6.7.0-alpha' }