Web production note

　【更新日 : 】

【Gulp】タスクランナーGulpでCompassを利用してSassファイルをコンパイルし、Autoprefixerでベンダープレフィックスを追加する。

Category：
Gulp
Tags：
, , , ,

タスクランナーGulpでCompassを利用してSassファイルをコンパイルし、Autoprefixerでベンダープレフィックスを追加する方法です。少しややこしいのですが、古い案件でCompassのミックスインを利用したsassファイルにAutoprefixerでベンダープレフィックスを付け直したい事があったので実装をしてみました。

※新規で作成をするプロジェクトの場合は、Compassを利用せずGulpでSassファイルをコンパイルし 、Autoprefixerでベンダープレフィックスを追加する方法をオススメします。

【Gulp】タスクランナーGulpでSassファイルをコンパイルし 、Autoprefixerでベンダープレフィックスを追加する。

【Gulp】タスクランナーGulpでSassファイルをコンパイルし 、Autoprefixerでベンダープレフィックスを追加する。

さまざまな処理を自動化できるタスクランナー「Gulp」を利用して、Sassファイルのコンパイルと、 Autoprefixerによるベンダープレフィックスの付与を自動化してみたので、…

GulpとCompassの設定

ベースとなる初期設定は以下ページを参考にしてください。

【Gulp】タスクランナーGulpでCompassを利用し、Sassファイルをコンパイルする。

【Gulp】タスクランナーGulpでCompassを利用し、Sassファイルをコンパイルする。

タスクランナーGulpでCompassを利用し、Sassファイルのコンパイルする方法をまとめました。 Compassを利用せずGulpでSassファイルをコンパイルし 、Autop…

ベンダープレフィックスを追加するgulp-autoprefixerをインストール

GulpとCompassをインストール後、CSSのベンダープレフィックスを追加するのに利用する「gulp-autoprefixer」をインストールします。

npm install -D gulp-autoprefixer

autoprefixerの設定をプロジェクトのjsonファイルに追加

autoprefixerのバージョンアップに伴ってこれまでgulp.jsファイルに設定を書いていたものが利用できなくなりました。
以下のようなエラーが出る場合は、プロジェクトのjsonファイル（package.json）に追加する必要があります。

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

package.jsonの末尾に追加します。

"browserslist": [
  "last 3 versions",
  "> 5%",
  "iOS >= 9.0",
  "Android >= 4.1",
  "ie >= 11"
]

指定バリエーションはGithubで確認できます。

Browserslist

Gulpを実行するためのgulpfile.jsにautoprefixerを追記

最後にgulpfile.jsにautoprefixerを追記します。
以下はGulp 4.0以降の場合です。

// 各Gulpプラグインの読み込み
var gulp = require('gulp');
var compass = require('gulp-compass');
var header = require( 'gulp-header' );
var plumber = require('gulp-plumber');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');

// compassを利用してSassファイルをコンパイル
gulp.task('default', function () {
	// style.scssファイルを監視
	return gulp.watch('sass/*.scss', function () {
		// style.scssファイルを取得
		return gulp.src('sass/*.scss')
			.pipe(plumber())
			.pipe(compass({
				config_file: 'config.rb', //config.rbファイル参照ディレクトリ
				comments: false,
				css: 'html/common/css/',//cssファイル生成ディレクトリ
				sass: 'sass/'//sassファイル参照ディレクトリ
			}))
			.pipe(autoprefixer({
				cascade: false
			}))
			.pipe(replace(/@charset "UTF-8";/g, ''))
			.pipe(header('@charset "UTF-8";'))
			.pipe(gulp.dest('html/common/css/'));
			done();
	});
});

gulp-autoprefixer 7.0.0でエラーが出た場合

タスクを実行しようとしたところ、gulp-autoprefixerで以下のようなエラーが発生しました。
（発生したバージョン：gulp-autoprefixer 7.0.0）
本エラーはnode.jsのバージョンが古いと発生するようです。

node.jsを更新するか、gulp-autoprefixerの7.0.0を一度アンイストールし、一つ前のバージョン6.1.0をインストールし直す事で解決しました。

/Users/~~~/node_modules/gulp-autoprefixer/index.js:21
(async () => {
		       ^
SyntaxError: Unexpected token (
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:511:25)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object. (/Users/~~~/gulpfile.js:7:20)
    at Module._compile (module.js:541:32)

gulp-autoprefixerをアンイストール

npm uninstall -D gulp-autoprefixer

gulp-autoprefixerの旧バージョンをインストール

旧バージョンをインストールしたい場合は末尾にバージョンを追加します。

npm install -D gulp-autoprefixer@6.1.0

gulp-autoprefixerのバージョン一覧

目次 を閉じる