##はじめに
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が追加され、ビルドできるようになりました。
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'));
});