gulp常用插件之autoprefixer使用

更多gulp常用插件使用请访问：gulp常用插件汇总

---

autoprefixer这是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里。

更多使用文档请点击访问autoprefixer工具官网。

安装

一键安装不多解释

npm install --save-dev autoprefixer

使用

autoprefixer(options)就是调用啦，options是个object。

autoprefixer(options)

如何在gulpfile.js文件里使用呢？其实也很简单，请看：

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

gulp.task('default', () =>
    gulp.src('./before/css.css')
        .pipe(autoprefixer({
            overrideBrowserslist:['> 1%', 'last 2 versions', 'Firefox ESR'], // 重要配置 详见下面
            cascade: false //  是否美化属性值
        }))
        .pipe(gulp.dest('./before/dist'))
);

其实这样就算使用autoprefixer了，是不是很简单。

控制注释

如果您在CSS的某些部分不需要使用Autoprefixer，则可以使用控件注释禁用Autoprefixer。

.a {
  transition: 1s; /* will be prefixed */
}

.b {
  /* autoprefixer: off */
  transition: 1s; /* will not be prefixed */
}

.c {
  /* autoprefixer: ignore next */
  transition: 1s; /* will not be prefixed */
  mask: url(image.png); /* will be prefixed */
}

控件注释分为三种：

• /* autoprefixer: (on|off) */ ：启用/禁用，那么整个块的所有Autoprefixer转换之前和之后的评论。
• /* autoprefixer: ignore next */ ：仅对下一个属性或下一个规则选择器或规则参数（而不是规则/规则正文）禁用自动前缀。
• /* autoprefixer grid: (autoplace|no-autoplace|off) */ ：控制Autoprefixer如何处理整个块的网格转换：
  • autoplace：启用具有自动放置支持的网格转换。
  • no-autoplace：在禁用自动放置支持的情况下启用网格转换（别名为不赞成使用的值on）。
  • off：禁用所有网格转换。

您还可以递归使用注释：

/* autoprefixer: off */
@supports (transition: all) {
  /* autoprefixer: on */
  a {
    /* autoprefixer: off */
  }
}

请注意，禁用整个块的注释不应在同一块中出现两次：

/* How not to use block level control comments */

.do-not-do-this {
  /* autoprefixer: off */
  transition: 1s;
  /* autoprefixer: on */
  transform: rotate(20deg);
}

Options详解

可用的选项有：

• env （字符串）：Browserslist的环境。

• cascade（布尔值）：如果CSS未压缩，则Autoprefixer应该使用Visual Cascade。默认：true

• add（布尔值）：Autoprefixer应该添加前缀。默认值为true。

• remove（布尔值）：应该使用Autoprefixer [删除过时的]前缀。默认值为true。

• supports（布尔值）：Autoprefixer应该为@supports 参数添加前缀。默认值为true。

• flexbox（布尔值|字符串）：Autoprefixer应该为flexbox属性添加前缀。随着"no-2009"价值Autoprefixer只会最终和IE 10个版本规格的加上前缀。默认值为true。

• grid（false | "autoplace"| "no-autoplace"）：Autoprefixer是否应为Grid Layout属性添加IE 10-11前缀？

  • false （默认）：阻止自动前缀生成器输出CSS Grid转换。
    
    -"autoplace"：启用Autoprefixer网格转换并包括自动放置支持。您也可以/* autoprefixer grid: autoplace */在CSS中使用 。
  • "no-autoplace"：启用Autoprefixer网格转换，但不支持自动放置。您也可以/* autoprefixer grid: no-autoplace */在CSS中使用 。（折旧true值的别名）

• stats（对象）：自定义使用统计对> 10% in my stats 浏览器的查询。

• overrideBrowserslist（数组）：目标浏览器的查询列表。最佳实践是使用.browserslistrc配置或browserslist键入命令package.json来与Babel，ESLint和Stylelint共享目标浏览器。有关 可用的查询和默认值，请参见 Browserslist文档。

• ignoreUnknownVersions（布尔值）：在Browserslist配置中的未知浏览器版本上不引发错误。默认值为false。

插件对象具有info()用于调试目的的方法。

除错

npx autoprefixer --info 在您的项目目录中运行，以检查选择了哪些浏览器以及哪些属性将带有前缀：

$ npx autoprefixer --info
Browsers:
  Edge: 16

These browsers account for 0.26% of all users globally

At-Rules:
  @viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  appearance: webkit
  flow-from: ms
  flow-into: ms
  hyphens: ms
  overscroll-behavior: ms
  region-fragment: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  scroll-snap-type: ms
  text-size-adjust: ms
  text-spacing: ms
  user-select: ms

JS API也可用：

console.log(autoprefixer().info())