FrontBox Grunt

Strongly integrated with:

https://github.com/BartoszPiwek/FrontBox-Grunt

Bunch of useful grunt tasks for Front-End Developer

Author: Bartosz Piwek
Last version: 1.0.6

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install frontbox-grunt --save-dev

Required for multitasks

In module export function (in Gruntfile.js) must be require declaration

module.exports = function(grunt) {
// other
require('jit-grunt')(grunt, {
  autocolor: 'node_modules/frontbox-grunt/tasks/autocolor.js',
  autoclass: 'node_modules/frontbox-grunt/tasks/autoclass.js',
  autosvg: 'node_modules/frontbox-grunt/tasks/autosvg.js',
});
// other
grunt.initConfig({
// other

Task: autocolor

Scan CSS Preprocessor files (LESS/SASS) and automatically replace/create variable for colors.

    autocolor: {
      automatic: {
        expand: true,
        src: '**',
        cwd: 'less/',
        filter: 'isFile'
      },
      options: {
        variableFile: "less/variables/_colors.less",
        prefix: "@",
      }
    },

    grunt.registerTask('color', ['autocolor']);

Options

options.variableFile

Type: String

Path for less/sass file contain all colors variables

options.prefix

Type: String

CSS Preprocessors variable prefix.

  @variable: 16px;

  $variable: 16px;

Preview

Task: autosvg

Automatically insert SVG tag with class and inline path

  autosvg: {
    automatic: {
      expand: true,
      src: ['*.html', "*.php"],
      cwd: 'template/',
      flatten: true,
    },
    options: {
      output_directory: "public/",
      svg_directory: "svg/",
      debug_log: true,
    }
  },

    grunt.registerTask('svg', ['autosvg']);

Usage

Place SVG tag with 'inline' string in the begin and src with SVG filename (without .svg and path):

  <svg inline class="icon download" src="download"></svg>

Options

options.output_directory

Type: String

Path directory for output files.

options.svg_directory

Type: String

Path for svg directory files.

options.debug_log

Type: Bool Default value: 'false'

Print expanded log.

Preview

Task: autometa

Automatic insert meta tags

    autometa: {
      automatic: {
        expand: true,
        src: ['*.html'],
        cwd: 'test/plugin-twitter',
        flatten: true,
      },
      options: {
        debug: true,
        twitter_account: "@twitter-account",
        website_name: "Website name",
        website_url: "http://example.com",
        image_dir: "images",
        image_format: "jpg",
        website_locale: "pl_PL",
        rename_url: {
          "index.html": "index2.html"
        },
        website_dir: "test/plugin-twitter/"
      }
    },

    grunt.registerTask('meta', ['autometa']);

Usage

Only fill task options

Options

TODO

Bugs and development

• Feel free

https://github.com/BartoszPiwek/FrontBox-Grunt/issues

Release History

1.0.61 - add autometa 1.0.6 - autosvg: easy class insert; change tag 1.0.5 - autoclass: repair duplication; cleaning 1.0.41 - add autosvg (no publish) 1.0.4 - autocolor: fix match character size 1.0.3 - autocolor: fix ignore variableFile 1.0.2 - autocolor: convert variables name to uppercase letter; add filepath to variableFile 1.0.0 - add autocolor & autoclass