Nanometer Process Machine

    gulp-sakugawa

    0.7.0 • Public • Published

    gulp-sakugawa (グルプ佐久川)

    Run sakugawa via gulp, for CSS splitting, filtering and organising.

    Mr Sakugawa enjoying the taste of gulp

    Dependency Status devDependency Status wercker status Windows build status Built with gulp

    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 gulp 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.

    Installation

    Please note that Node.js version minimum of 10.13.0, which is the active Long Term Support (LTS) version, is required to use this plugin.

    npm install gulp-sakugawa --save-dev
    const gulpSakugawa = require('gulp-sakugawa');

    Usage

    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.

    const gulp = require('gulp'),
      gulpSakugawa = require('gulp-sakugawa');
     
    gulp.task('default', function() {
      gulp.src('pure-min.css')
        .pipe(gulpSakugawa({
          maxSelectors: 400,
          mediaQueries: 'separate',
          suffix: '_'
        }))
        .pipe(gulp.dest('.'));
    });

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

    wget http://yui.yahooapis.com/pure/0.5.0/pure-min.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.7.0 (2020-05-29)
      • Minimum Node.js version lifted from 6.9.5 to 10.13.0
    • v0.6.0 (2017-06-28)
      • Minimum Node.js version lifted from 4.2.0 to 6.9.5
      • All dependencies are up to date again
    • v0.5.1 (2016-08-24)
      • Better type checking of options
      • Update dependencies
      • Start testing in Windows at AppVeyor
    • v0.5.0 (2016-05-13)
      • Minimum supported version of Node.js is 4.2.0 (LTS)
      • ESLint 2 and shared configuration #15
      • Minimum supported sakugawa is v0.5.0
    • v0.4.1 (2015-09-03)
      • Output filenames were not as documented, fixed via #10
    • v0.4.0 (2015-03-11)
      • Update Sakugawa to v0.4.0 which preserves existing @charset rules to all resulting files
    • v0.3.0 (2015-02-23)
      • Update Sakugawa to v0.3.0 which adds the minSheets option
    • v0.2.0 (2014-11-19)
      • First release, directly paired with Speed improvement release of Sakugawa

    License

    Copyright (c) Juga Paazmaya paazmaya@yahoo.com

    Licensed under the MIT license.

    Install

    npm i gulp-sakugawa

    DownloadsWeekly Downloads

    81

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    8.93 kB

    Total Files

    4

    Last publish

    Collaborators

    • paazmaya