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

@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

csso

autoprefixer

cssmqpacker

defaultOptions

Default options.

Type: Object

name

src

dest

filename

suffix

banner

sassOptions

postcssPlugins

compress

verbose

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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) target browsers.
- options.browsers Array [String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) alias of options.targets.
- options.banner String license comments (optional, default '')
- options.postcssPlugins Object list of PostCSS plugin. (optional, default [])
- options.verbose Boolean out debug log or not (optional, default false)

Examples

import { task } from 'gulp';
import buildCss, { autoprefixer } 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' },
    postcssPlugins: [autoprefixer(), (root) => root],
    compress: true
  })
);

Returns Function\