gulp-autoprefixer

gulp-autoprefixer

Prefix CSS with Autoprefixer

Issues with the output should be reported on the Autoprefixer issue tracker.

Install

npm install --save-dev gulp-autoprefixer

Usage

import gulp from 'gulp';
import autoprefixer from 'gulp-autoprefixer';

export default () => (
	gulp.src('src/app.css')
		.pipe(autoprefixer({
			cascade: false
		}))
		.pipe(gulp.dest('dist'))
);

API

autoprefixer(options?)

options

Type: object

See the Autoprefixer options.

Source Maps

Use gulp-sourcemaps like this:

import gulp from 'gulp';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';
import autoprefixer from 'gulp-autoprefixer';

export default () => (
	gulp.src('src/**/*.css')
		.pipe(sourcemaps.init())
		.pipe(autoprefixer())
		.pipe(concat('all.css'))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('dist'))
);

Tip

If you use other PostCSS based tools, like cssnano, you may want to run them together using gulp-postcss instead of gulp-autoprefixer. It will be faster, as the CSS is parsed only once for all PostCSS based tools, including Autoprefixer.

Similar packages

Other packages similar to gulp-autoprefixer

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It is more versatile than gulp-autoprefixer as it can be used for a wide range of CSS transformations, not just autoprefixing. Autoprefixer itself is a PostCSS plugin, so using PostCSS directly allows for more customization and the use of additional plugins.

autoprefixer

Autoprefixer is the core tool that gulp-autoprefixer uses under the hood. It can be used directly with PostCSS or other build tools. Using Autoprefixer directly provides more flexibility and control over the configuration and integration with other PostCSS plugins.