Gulpを数ヶ月使い、色々なモジュールを試している中で、他の制作者の方が使いやすいと仰っていた「gulp-pleeease」を導入してみました。
gulp-pleeeaseは、ベンダーブレフィックスやminifyなどの色々な機能が揃っているとの事で、これから有効的に活用していきたいのですが、思った通りにベンダーブレフィックスが付与されず、色々試してみましたが、原因がわからく、ここでご相談させていただければと思います。
やりたいこと
gulp-pleeeaseを使って、Android 2.3.4の標準ブラウザ用にもベンダーブレフィックスを付けてSCSSをコンパイルしたい
gulpfile.js
lang
1module.exports = gulp 2var gulp = require('gulp'); 3var sass = require('gulp-sass'); 4var watch = require('gulp-watch'); 5var pleeease = require('gulp-pleeease'); 6var sequence = require('run-sequence'); 7var plumber = require('gulp-plumber'); 8 9// SCSSをコンパイル 10gulp.task('sass', function() { 11 gulp.src('sp/sass/**/*.scss') 12 .pipe(plumber()) 13 .pipe(sass()) 14 // pleeeaseに変更したためコメントアウト 15 // .pipe(autoprefixer('last 2 versions')) 16 // .pipe(minifycss()) 17 .pipe(gulp.dest('sp/css')); 18}); 19 20gulp.task('pleeease', function() { 21 gulp.src('sp/css/**/*.css') 22 .pipe(pleeease({ 23 // ここでベンダーブレフィックスを追加したい 24 'autoprefixer': { 'browsers': ['last 2 versions', 'ie 6', 'ie 7', 'ie 8', 'Safari 4', 'Android 2.3', 'iOS 4'] }, 25 'minifier': true 26 })) 27 .pipe(gulp.dest('sp/css/')); 28}); 29 30// タスクの順番を指定(.scssコンパイル後⇒コンパイル後の.cssをpleeeaseで圧縮・ベンダーブレフィックスを追加) 31gulp.task('css', function() { 32 sequence('sass', 'pleeease'); 33}); 34 35// watchで監視 36gulp.task('watch', ['server'], function(){ 37 gulp.watch( 38 'sp/sass/**/*.scss', 39 'sp/css/**/*.css', 40 ['css']); 41}); 42 43gulp.task('default',[ 44 'watch' 45 ]);
上記で設定していますが、ベンダープレフィックスや圧縮が行われずにcssが生成されてしまいます。
Andoroid 2.3.4標準ブラウザはグラデーションが「-webkit-gradient」にしか対応していないため、どうにかして上記設定でコンパイル・ベンダープレフィクス・圧縮を一括でできればと思います
どなたか、どこが間違っているのか、また参考になるサイト(本家サイトも確認したのですが…)をご教示いただければと思います。
何卒、宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/09 17:36