gulp-ccr-postcss

Transforming styles with JS plugins. A cascading configurable gulp recipe for gulp-chef.

Install

1npm install --save-dev "gulpjs/gulp#4.0" gulp-chef gulp-ccr-postcss

Recipe

PostCSS

Ingredients

• gulp-postcss

• gulp-flatten

• gulp-sourcemaps

API

config.processors

An array or an object of processors.

If an array, items must be pre-loaded processor function; or string, and gulp-ccr-postcss will load the processor without initializing it.

If an object, property name must be processor module name, and value be pre loaded processor function; or option value, and gulp-ccr-postcss will load the processor and initialize it with the option value if it is not falsy.

In all cases, you can omit "postcss-" prefix for module names.

config.flatten

If you are not inlining css files with postcss-import, maybe you want to remove or replace file paths.

config.sourcemaps

Options to generate sourcemaps. False to disable sourcemaps; True to generate inline sourcemaps; String to generate external sourcemaps at given dest folder.

config.syntax

Use a custom parser. Currently only supports "scss", note that the postcss-scss plugin must be installed first.

config.options

Additional options to pass to postcss.

Usage

1$ npm install --save-dev "gulpjs/gulp#4.0" gulp-chef gulp-ccr-postcss postcss-cssnext cssnano precss

1var gulp = require('gulp');
2var chef = require('gulp-chef');
3
4var meals = chef({
5    src: 'app/',
6    dest: 'dist/',
7    postcss: {
8        src: '**/*.css',
9        processors: {
10            cssnext: {
11                features: {
12                    autoprefixer: { browsers: ['last 1 version'] }
13                }
14            },
15            cssnano: { safe: true },
16            precss: ''
17        },
18        flatten: true,
19        sourcemaps: './'
20    }
21});
22
23gulp.registry(meals);

This roughly do the same thing as the following normal gulp construct:

1$ npm install --save-dev "gulpjs/gulp#4.0" gulp-flatten gulp-sourcemaps gulp-if gulp-postcss postcss-cssnext cssnano precss

1var gulp = require('gulp');
2var postcss = require('gulp-postcss');
3var flatten = require('gulp-flatten');
4var sourcemaps = require('gulp-sourcemaps');
5var gulpif = require('gulp-if');
6
7var config = {
8    dest: 'dist/',
9    styles: 'app/**/*.css',
10    flatten: true,
11    sourcemaps: './'
12};
13
14var processors = [
15    require('postcss-cssnext')({
16        features: {
17            autoprefixer: { browsers: ['last 1 version'] }
18        }
19    }),
20    require('cssnano')({ safe: true }),
21    require('precss')
22];
23
24function postcss() {
25    return gulp.src(config.styles)
26        .pipe(sourcemaps.init())
27        .pipe(gulpif(config.flatten, flatten()))
28        .pipe(postcss(processors))
29        .pipe(gulpif(config.sourcemaps, sourcemaps.write(config.sourcemaps)))
30        .pipe(gulp.dest(config.dest));
31}
32
33gulp.task(postcss);

Use the postcss-scss plugin

1$ npm install --save-dev "gulpjs/gulp#4.0" gulp-chef gulp-ccr-postcss postcss-scss cssnano

1var gulp = require('gulp');
2var chef = require('gulp-chef');
3
4var meals = chef({
5    src: 'app/',
6    dest: 'dist/',
7    postcss: {
8        src: '**/*.scss',
9        processors: {
10            cssnano: { safe: true }
11        },
12        syntax: 'scss',
13        sourcemaps: './'
14    }
15});
16
17gulp.registry(meals);

Standalone

Gulp-ccr-postcss can be used as a standalone function.

1var gulp = require('gulp');
2var postcss = require('gulp-ccr-postcss');
3
4function css() {
5    return postcss({
6        src: 'app/**/*.css',
7        processors: {
8            cssnext: {
9                features: {
10                    autoprefixer: { browsers: ['last 1 version'] }
11                }
12            },
13            cssnano: { safe: true },
14            precss: '',
15        },
16        flatten: true,
17        sourcemaps: './'
18    });
19}
20
21gulp.task(css);

License

MIT

Author

Amobiz