2021/01/06 （最終更新日：2021/10/10）

【Sassユーザー必見】ベンダープレフィックスを自動で付ける方法【Autoprefixer/gulp版】

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

【Sassでベンダープレフィックスを自動で付ける方法が知りたい人】

「Sassをコンパイルする際にベンダープレフィックスを自動で付ける方法が知りたいなぁ。」

こういった悩みに答えます。

本記事の内容

ベンダープレフィックスについておさらい
Sassのコンパイル時にベンダープレフィックスを自動で付ける方法【gulp版】
もっと手軽にAutoprefixerを使う方法【VSCodeの拡張機能】

今回は、
Sassをコンパイルした際に
ベンダープレフィックスを自動で付ける方法
について解説していきます。

ベンダープレフィックスについておさらい

帽子をかぶった集団

まずは、
ベンダープレフィックスについて
簡単におさらいです。

たぶん説明するより
実際にみた方が早いと思うので、
下記の主要ブラウザごとの
ベンダープレフィックスをご覧ください。

-moz- … Firefox
-webkit- … Google Chrome、Safari
-ms- … Internet Explorer

これらのナゾの文字列、
一度はみたことがあるのではないでしょうか？

簡単に説明すると、
このベンダープレフィックスを
CSSのプロパティの頭に付けることで、
これまで対応していなかったプロパティが
各ブラウザで使えるようになります。

各ブラウザの
プロパティの対応状況に関しては、
Can I use…
というサービスで確認できます。

とはいえ、
プロパティを使うたびに

各ブラウザの対応状況を調べる。
対応していないブラウザがある場合には手動でベンダープレフィックスを付ける。

、、こんな作業面倒ですよね。。

なので、
これからこの面倒な作業を
自動化する方法を紹介します。

Sassのコンパイル時にベンダープレフィックスを自動で付ける方法【gulp版】

ベンダープレフィックスを自動で付けるには
いくつか方法があるのですが、
僕はWeb制作者の間で広く使われている
タスクランナーと呼ばれる
gulpを使った方法を
オススメしています。

まだgulpをインストールしていない方は
下記の記事を参考にしてください。

また、
もし本記事と同じ環境（コード）で
進めていきたいという方は、
下記の記事にも目を通してください。
（※3記事ありますが数分で環境構築できます。）

では、
準備ができたものとして進めていきます。

念のため、
スタート時の環境を共有しておきます。

まず、
プロジェクトの中身が下記のとおりです。

node_modulesフォルダ
Sassファイル
gulpfile.js
package-lock.json
package.json

続いて、
gulpfile.jsのコードは下記のとおりです。

【gulpfile.js】

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sourcemaps.init())
		.pipe(sassGlob())
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

最後に、
普段はあまり触らない
『package.json』ですが、
今回は編集をするので
こちらも編集前のコードを共有です。
（※バージョンはインストールのタイミングにより異なる。）

【package.json】

{
  "name": "gulp-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0",
    "gulp-sourcemaps": "^3.0.0"
  }
}

それでは、
gulpでAutoprefixerを使う手順
を解説していきます。

大まかな手順が下記のとおり。

gulp-autoprefixerのインストール。
gulpfile.jsにコードを追記。
package.jsonに設定を追加。

順番に解説していきます。

①gulp-autoprefixerのインストール

まずは
『gulp-autoprefixer』
をインストールします。

ターミナルを開いて、
下記のコマンドを実行してください。

npm i --D gulp-autoprefixer

インストールの作業はこれだけで完了です。

②gulpfile.jsにコードを追記

インストールが出来たら、
次に下記のように
gulpfile.jsにコードを追記します。

【gulpfile.js（追記後）】

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const autoprefixer = require('gulp-autoprefixer'); //追記箇所①
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sourcemaps.init())
		.pipe(sassGlob())
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(autoprefixer({　//追記箇所②ここから
			cascade: false,
			grid: true
		}))　//追記箇所②ここまで
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

③package.jsonに設定を追加

今までの他のパッケージは、
インストール後に
gulpfile.jsにコードを追記
するだけで良かったのですが、
今回の『gulp-autoprefixer』は、
package.jsonにも設定を追加
しないと上手く動作しません。

というわけで
下記のように設定を追加します。

【package.json（追記後）】

{
  "name": "gulp-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0",
    "gulp-sourcemaps": "^3.0.0"
  },
  // 設定を追加
  "browserslist": [
    "last 2 version",
    "> 5%",
    "ie >= 9"
  ]
}

これで、
Sassをコンパイルした際に
自動的にベンダープレフィックスを
付けてくれるようになりました。