Introduction to gulp-autoprefixer

The gulp-autoprefixer plugin is a powerful tool for front-end developers that automates the addition of vendor prefixes in CSS, ensuring compatibility across multiple browsers. This tool enhances productivity and streamlines the development workflow by automatically adjusting CSS properties that require vendor prefixes.

Basic API Usage

  const gulp = require('gulp');
  const autoprefixer = require('gulp-autoprefixer');

  gulp.task('styles', () =>
    gulp.src('src/css/*.css')
      .pipe(autoprefixer({
        cascade: false
      }))
      .pipe(gulp.dest('dist/css'))
  );

Advanced API Examples

Below are some of the more advanced options you can use with gulp-autoprefixer:

Specifying Browsers

You can specify the browsers you want to support using the browsers option:

  gulp.task('styles', () =>
    gulp.src('src/css/*.css')
      .pipe(autoprefixer({
        overrideBrowserslist: ['last 2 versions', 'ie 10']
      }))
      .pipe(gulp.dest('dist/css'))
  );

Grid Autoplacement

Enable autoplacement for CSS Grid using the grid option:

  gulp.task('styles', () =>
    gulp.src('src/css/*.css')
      .pipe(autoprefixer({
        grid: 'autoplace'
      }))
      .pipe(gulp.dest('dist/css'))
  );

Complete Example

Here is a complete example of using gulp-autoprefixer in a typical project setup:

  const gulp = require('gulp');
  const autoprefixer = require('gulp-autoprefixer');
  const sass = require('gulp-sass')(require('sass'));
  const cleanCSS = require('gulp-clean-css');

  gulp.task('styles', () =>
    gulp.src('src/scss/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer({
        overrideBrowserslist: ['last 2 versions'],
        cascade: false,
        grid: 'autoplace'
      }))
      .pipe(cleanCSS({compatibility: 'ie8'}))
      .pipe(gulp.dest('dist/css'))
  );

  gulp.task('default', gulp.series('styles'));

This setup will compile your SCSS files to CSS, add necessary vendor prefixes, minify the CSS, and save the results to the dist/css directory.

With gulp-autoprefixer, you can ensure that your CSS code is compatible with a wide range of browsers, reducing the likelihood of browser-specific issues.

Hash: 3ee570962cf6e8b2bd5a6ef2646611b61cf672a4b65975af238536683d02aadf