質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

1回答

3642閲覧

Gulpで「gulp-pleeease」を使っているがベンダープレフィックスがうまく付与されない

Kama

総合スコア11

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2015/07/06 19:24

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」にしか対応していないため、どうにかして上記設定でコンパイル・ベンダープレフィクス・圧縮を一括でできればと思います

どなたか、どこが間違っているのか、また参考になるサイト(本家サイトも確認したのですが…)をご教示いただければと思います。

何卒、宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

↓この部分を

'autoprefixer': { 'browsers': ['last 2 versions', 'ie 6', 'ie 7', 'ie 8', 'Safari 4', 'Android 2.3', 'iOS 4'] }, 'minifier': true

↓こうするとどうでしょう?(プロパティのクォーテーションをはずしています。)

autoprefixer: { 'browsers': ['last 2 versions', 'ie 6', 'ie 7', 'ie 8', 'Safari 4', 'Android 2.3', 'iOS 4'] }, minifier: true

下記のページを参考にして僕は動くようになりました。(バージョンアップにともなって書き方がちょくちょく変わるようです…)
https://github.com/danielhusar/gulp-pleeease/issues/4

投稿2015/08/05 11:31

tm_rhcp

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kama

2015/08/09 17:36

ありがとうございます。一度試して見たいと思います。 この手のものはちょこちょこ変わるのはなんとなく認識しておりましたが、もっと肝に銘じないとダメですね。 実は上記の案件はすでに制作完了したので、ぜひ違うサイトで試してみたいと思います! ありがとうございました。これからも何卒ご教示・ご指導くださいませ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問