@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