1. gulp-autoprefixer
Prefix CSS
gulp-autoprefixer
Package: gulp-autoprefixer
Created by: sindresorhus
Last modified: Thu, 02 Nov 2023 16:52:26 GMT
Version: 9.0.0
License: MIT
Downloads: 853,953
Repository: https://github.com/sindresorhus/gulp-autoprefixer

Install

npm install gulp-autoprefixer
yarn add 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.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin