Nose Picking Mechanisms

    This package has been deprecated

    Author message:

    No efforts are placed on updating grunt-sakugawa any longer

    grunt-sakugawa

    0.6.0 • Public • Published

    grunt-sakugawa (グラント佐久川)

    Run Sakugawa via Grunt, for CSS splitting, filtering and organising.

    Mr Sakugawa and Mr Grunt

    Dependency Status devDependency Status wercker status Built with Grunt

    Internet Explorer versions from 6 up to 9 come with a limitation for selectors present in a single CSS file. This limitation of 4095 selectors created the need for CSS splitter, which might be the main use case of this task runner plugin.

    Since IE8 and earlier, do not support media queries, but IE9 does, there is an option for handling media queries differently, based on the targeted IE version. By separating media queries in to a different file, it will allow the to include that CSS file conditionally only when IE9 is being used. Ideally this would reduce the amount of bytes downloaded by IE8, which cannot handle the media queries anyhow, and thus prevent downloading something that is not even used.

    Internally this Grunt task uses Sakugawa, thus in the case of any problems regarding the resulting output or input handling, and also for any feature requests, please refer to the issues at Sakugawa project.

    Getting Started

    This plugin requires Grunt ~0.4 and Node.js version to be minimum of 10.13.0, which is the active Long Term Support (LTS) version.

    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 grunt-sakugawa --save-dev

    Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

    grunt.loadNpmTasks('grunt-sakugawa');

    The "sakugawa" task

    Overview

    Example configuration against Pure CSS, which results in two files, pure-min_1.css and pure-min_2.css in which the latter contains all media queries.

    grunt.initConfig({
      sakugawa: {
        sakugawa: {
          pure: {
            options: {
              maxSelectors: 400,
              mediaQueries: 'separate',
              suffix: '_'
            },
            src: ['pure-min.css']
          }
        }
      },
    });

    The CSS file used in the example can be retrieved with:

    wget http://yui.yahooapis.com/pure/0.5.0/pure-min.css

    Options

    options.maxSelectors

    Type: Number

    Default value: 4090

    Maximum number of selector in a single resulting file. The actual selector count might be a bit lower based on the distribution of the selectors.

    options.minSheets

    Type: Number

    Default value: 1

    Minimum number of output CSS files

    options.mediaQueries

    Type: String

    Default value: 'normal'

    Media query handling, separation to different file ('separate') or ignorance ('ignore'). By default media queries are included as they appear in the original CSS.

    options.suffix

    Type: String

    Default value: '_'

    Output CSS file suffix. For example the underscore before file counter, styles_1.css.

    Contributing

    "A Beginner's Guide to Open Source: The Best Advice for Making your First Contribution".

    Also there is a blog post about "45 Github Issues Dos and Don’ts".

    Linting is done with ESLint and can be executed with npm run lint. There should be no errors appearing after any JavaScript file changes.

    Version history

    • v0.6.0 (2020-05-28)
      • Minimum Node.js version lifted from 4.2.0 to 10.13.0
      • Four years worth of dependency updates 🎩
    • v0.5.1 (2016-08-11)
      • Dependencies are sure 🎩 up to date
      • Use ESLint directly without the Grunt.js plugin
      • Start testing at Wercker #1
    • v0.5.0 (2016-05-03)
      • Update to match Sakugawa v0.5.0
      • Compatible with Grunt 1.0.0
      • Use shared ESLint configuration #5
      • Take ESLint in use
      • Require Node.js version minimum of 4.2.0 (LTS)
    • v0.4.0 (2015-03-11)
      • Update Sakugawa to v0.4.0 which preserves existing @charset rules to all resulting files
    • v0.3.1 (2015-02-25)
      • Use at least Sakugawa v0.3.2 due to its fixes
      • Better destination handling
    • v0.3.0 (2015-02-23)
      • Update Sakugawa to v0.3.0 which adds the minSheets option
      • Also fix task when destination is a directory
    • v0.2.0 (2014-11-19)
      • Speed improvements release of Sakugawa migration
    • v0.1.0 (2014-11-17)
      • Initial release matching with Sakugawa release

    License

    Copyright (c) Juga Paazmaya paazmaya@yahoo.com

    Licensed under the MIT license.

    Install

    npm i grunt-sakugawa

    DownloadsWeekly Downloads

    0

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    9.78 kB

    Total Files

    4

    Last publish

    Collaborators

    • paazmaya