Nerdy People Matriculate

    @hidoo/gulp-task-build-css-sass

    0.19.0 • Public • Published

    @hidoo/gulp-task-build-css-sass

    Task that build css by sass for gulp.

    Installation

    $ npm install --save-dev gulp @hidoo/gulp-task-build-css-sass

    Usage

    basic:

    import {task} from 'gulp';
    import buildCss from '@hidoo/gulp-task-build-css-sass';
    
    task('css', buildCss({
      src: '/path/to/scss/main.scss',
      dest: '/path/to/dest'
    }));

    remove unused CSS:

    import {task} from 'gulp';
    import buildCss from '@hidoo/gulp-task-build-css-scss';
    
    task('css', buildCss({
      src: '/path/to/scss/main.scss',
      dest: '/path/to/dest',
      uncssTargets: ['/path/to/target.html']
    }));

    API

    buildCss

    return css build task by sass

    Parameters

    • options Object options (optional, default {})

      • options.name String task name (use as displayName) (optional, default 'build:css')
      • options.src String source path
      • options.dest String destination path
      • options.filename String destination filename (optional, default 'main.css')
      • options.suffix String suffix when compressed (optional, default '.min')
      • options.targets Array<String>? target browsers. see: default target browsers
      • options.browsers Array<String>? alias of options.targets.
      • options.banner String license comments (optional, default '')
      • options.sassOptions Object sass options. see: sass options (optional, default {outputStyle:'expanded'})
      • options.url String type of processing of url() (one of [inline|copy|rebase]) see: https://www.npmjs.com/package/postcss-url (optional, default null)
      • options.urlOptions Object options of processing of url() see: https://www.npmjs.com/package/postcss-url#options-combinations (optional, default {})
      • options.uncssTargets Array<String> array of html file path that target of uncss process (optional, default [])
      • options.uncssIgnore Array<String> array of selector that should not removed (optional, default [])
      • options.additionalProcess Function<PostCSSRoot> additional PostCss process (optional, default null)
      • options.compress Boolean compress file or not (optional, default false)

    Examples

    import {task} from 'gulp';
    import buildCss from '@hidoo/gulp-task-build-css-sass';
    
    task('css', buildCss({
      name: 'css:main',
      src: '/path/to/scss/main.scss',
      dest: '/path/to/dest',
      filename: 'styles.css',
      suffix: '.hoge',
      targets: ['> 0.1% in JP'],
      banner: '/*! copyright <%= pkg.author %> * /\n',
      sassOptions: {outputStyle: 'nested'},
      url: 'inline',
      urlOptions: {basePath: path.resolve(process.cwd(), 'src/images')},
      uncssTargets: ['/path/to/html/target.html'],
      uncssIgnore: ['.ignore-selector'],
      additionalProcess: (root) => root,
      compress: true
    }));

    Returns Function<Stream>

    Test

    $ npm test

    License

    MIT

    Keywords

    Install

    npm i @hidoo/gulp-task-build-css-sass

    DownloadsWeekly Downloads

    46

    Version

    0.19.0

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • hidoo