b2evolution b2evolution

  • Sign in
  • Sign up
  • About
  • Downloads
  • Hosting
  • Docs
  • Support
  • Sign in
  • Sign up
  • Manuals Home
  • Latest Updates
 
  1. b2evolution CMS User Manual
  2. Developer Reference
  3. Website Skins/Themes
  4. Using Grunt

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 the package.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)
  • then, in order to be able to invoke grunt on your system, type sudo 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' }
Created by fplanque • Last edit by fplanque on 2016-08-12 01:29 • •

No feedback yet

On this page

  • Setting up Grunt:
  • ONCE IN A WHILE:
  • In order to use Sass:
  • Using Gunt
  • Note for devs:
  • Checking versions:

Search the Manual

Content Hierarchy

  • b2evolution CMS User Manual
  • User's Guide
  • Installation / Upgrade
  • Front-office Reference
  • Back-office Reference
  • Developer Reference
    • Website Skins/Themes
      • Skin Development Primer
      • Loading additional resources into a skin
      • Where are the skin files?
      • CSS Guidelines
      • Targeted CSS Selectors
      • Introducing evoSkins
      • Modifying evoSkins
      • Creating evoSkins
      • Skin Tags / API
      • Styling widgets
      • Skin Quality Control
      • Using HTML 5 tags
      • Using Custom Item Templates
      • Using bootstrap classes in footers
      • Using Grunt
      • Dev Menu
      • How to add a Google Font (WebFont) ?
      • Custom Fields in a Template
      • Site Skins
    • Email Skins/Themes
    • b2evolution Files
    • Website Integration
    • Plugins
    • Debugging
    • Technical Reference
    • Hacks
    • Credits
    • Development
    • How to... (Customize)
    • Scheduled Tasks Reference
  • Operations Reference
  • Advanced Topics
  • Glossary
  • Archives
powered by an open-source CMS

This online manual is powered by b2evolution CMS – A complete engine for your website.

About b2evolution

  • What is it?
  • Features
  • Getting Started
  • Screenshots
  • Online demo
  • Testimonials
  • Design philosophy
  • Free & open source
  • Terms of service

Downloads

  • Latest releases
  • Skins
  • Plugins
  • Language packs

About us

  • About us
  • Contact

Webhosting Guide

  • Web hosting blog
  • Best web hosting
  • Cheap web hosting
  • Green web hosting
  • Hosting with SSH
  • VPS hosting
  • Dedicated servers
  • Reseller hosting
  • Int'l: UK / France

Docs & Support

  • Online manual
  • Forums
  • Hire a pro !

Other

  • Adsense
  • Press room
  • Privacy policy

Stay in touch

  • GitHub
  • Twitter
  • Facebook
  • LinkedIn
  • News blog
  • RSS feed
  • Atom feed

Founded & Maintained by François Planque