Posted at

gulp-autoprefixerでPromise is not definedのエラーが出る

More than 3 years have passed since last update.


はじめに

cssのベンダープレフィクスを手動で追加するのは大変なので、

gulpを使ってsassをビルド時にベンダープレフィクスも自動で付与されるようにする。


準備

gulp-autoprefixerをインストール

$ npm install --save-dev gulp-autoprefixer


使い方


gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
gulp.src('./**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('./css'));
});



問題

いざ上記taskを実行したところ下記のエラーが発生。


this.processing = new Promise(function (resolve, reject) {
^
ReferenceError: Promise is not defined
at LazyResult.async (/Users/xxx/app/node_modules/postcss/lib/lazy-result.js:152:31)
at LazyResult.then (/Users/xxx/app/node_modules/postcss/lib/lazy-result.js:75:21)
at DestroyableTransform._transform (/Users/xxx/app/node_modules/gulp-autoprefixer/index.js:24:6)
at DestroyableTransform.Transform._read (/Users/xxx/app/node_modules/gulp-autoprefixer/node_modules/readable-stream/lib/_stream_transform.js:172:10)
at DestroyableTransform.Transform._write (/Users/xxx/app/node_modules/gulp-autoprefixer/node_modules/readable-stream/lib/_stream_transform.js:160:12)
at doWrite (/Users/xxx/app/node_modules/gulp-autoprefixer/node_modules/readable-stream/lib/_stream_writable.js:333:12)
at writeOrBuffer (/Users/xxx/app/node_modules/gulp-autoprefixer/node_modules/readable-stream/lib/_stream_writable.js:319:5)
at DestroyableTransform.Writable.write (/Users/xxx/app/node_modules/gulp-autoprefixer/node_modules/readable-stream/lib/_stream_writable.js:246:11)
at DestroyableTransform.ondata (/Users/xxx/app/node_modules/gulp-sass/node_modules/readable-stream/lib/_stream_readable.js:581:20)
at DestroyableTransform.EventEmitter.emit (events.js:95:17)

nodeがv0.10がPostCSSをサポートしていない為、nodeをv0.12にあげるか、Promise polyfillを追加してあげる必要があるようです。

(この表現が合っているか自信なし)


回避策

下記のプラグインを読み込むことでPromise polyfillが追加され、ビルドできるようになりました。

es6-promise

npm install es6-promise --save-dev


gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
require('es6-promise').polyfill();

gulp.task('sass', function () {
gulp.src('./**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('./css'));
});