b2evolution b2evolution

  • Sign in
  • Sign up
  • About
  • Demo
  • Downloads
  • Hosting
  • Docs
  • Support
  • Sign in
  • Sign up
  • Manual Home
  • Latest Updates
 
  1. 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 Aug 12, 2016

No feedback yet


Form is loading...

Comment feed for this post

Search

  • Manual
  • Introduction
  • Installation / Upgrade
  • User's Guide
  • Front-office Reference
  • Back-office Reference
  • Developer Reference
    • Website Skins/Themes
      • Skin Development Primer
      • Photo Gallery Anatomy
      • 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
    • 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

Web Hosting Guide

  • Web hosting blog
  • Best web hosting
  • Cheap web hosting
  • Green web hosting
  • Web hosting with SSH
  • VPS hosting
  • Dedicated servers
  • Reseller hosting
  • Internatl: UK / France

Docs & Support

  • Online manual
  • Forums
  • Hire a pro !

Other

  • Adsense
  • Press room
  • Privacy policy

Stay in touch

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

Founded & Maintained by François Planque · Supported by the Evo Factory