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())