コンテンツへスキップ
ホーム » [gulp]ベンダープレフィックスとソースマップを同時に出力できない?

[gulp]ベンダープレフィックスとソースマップを同時に出力できない?

  • by

gulp始めました。が、初心者なため、まだわからないことも多いです。

今の悩みは「ソースマップの出力」と「CSS3のベンダープレフィックスの付与」を同時に実行するのが上手くいかない、というものです。

ひとまず基本的なglupfileの記述。ソースマップは出ます。

以下の様なタスクをglupfileに記述しています。(※WindowsのFirefoxで開発してます。)

var gulp = require('gulp'); // gulpを利用可能にする。
var sass = require('gulp-ruby-sass'); //gulp-ruby-sassを利用可能にする。


//指定したディリクトリ/ファイルのsassファイルを指定したディリクトリにコンパイルする。
gulp.task("sass", function() {

	gulp.src("sass/style.scss")
		.pipe(sass({
				style : 'expanded'
			}))
		.pipe(gulp.dest('./'))

});

これでstyle.css.mapが出力され、FireFoxの開発ツールで閲覧できます。

ベンダープレフィックスをつけるには

ベンダープレフィックスを付けたいときは、専用のプラグインをインストールし、タスクを記述する必要があります。
自分はgulp-pleeeaseというものを使っています。
glupfileは以下のようになります。

var gulp = require('gulp'); // gulpを利用可能にする。
var sass = require('gulp-ruby-sass'); //gulp-ruby-sassを利用可能にする。
var pleeease = require("gulp-pleeease"); //ベンダープレフィックスプラグイン。

//指定したディリクトリ/ファイルのsassファイルを指定したディリクトリにコンパイルする。
gulp.task("sass", function() {

	gulp.src("sass/style.scss")
		.pipe(sass({
			style : 'expanded'
		}))
		.pipe(pleeease({
			minifier: false // 圧縮しない
		}))
		.pipe(gulp.dest('./'))

});

エラーが出てしまう…

が、しかし!これだとコマンドプロンプトがエラーを吐いてコンパイルを停めてしまいます…

いろいろ試した結果、gulp-ruby-sassを使っているのが原因みたいです。
gulp-ruby-sassを使うのをやめて、gulp-sassに切り替るとするとエラーを吐きませんでした。(うーん何でだろう?)

とりあえずできたからいいか、と喜んだのも束の間、今度はソースマップが出力されなくなりました…
ソースマップを出力するプラグインがあったので使ってみたのですが、なぜかFireFoxの開発ツールで閲覧できず、解決に至りませんでした。

原因が解るまでの、ひとまずの対策

現状では

(1)ソースマップは出せるが、ベンダープレフィックスは出力できない。
(2)ソースマップは出せないが、ベンダープレフィックスは出力できる。

という二者択一の状態になってしまいました。

差し当たって、開発時は(1)でコードを書き、公開時に(2)でプレフィックスを付与する、というやり方で凌ぐことにします。

以下のようなgulpfileにして、開発と公開時によって切り替えるようにしてみました。

(1)開発フェーズ

var gulp = require('gulp'); // gulpを利用可能にする。
var sass = require('gulp-ruby-sass'); //gulp-ruby-sassを利用可能にする。
//var sass = require('gulp-sass'); //gulp-sassを利用可能にする。
var pleeease = require("gulp-pleeease"); //ベンダープレフィックスプラグイン。

//指定したディリクトリ/ファイルのsassファイルを指定したディリクトリにコンパイルする。
gulp.task("sass", function() {

	gulp.src("sass/style.scss")
		.pipe(sass({
			style : 'expanded'
		}))
//	.pipe(pleeease({
//		minifier: false // 圧縮しない
//	}))
	.pipe(gulp.dest('./'))

});

(2)公開フェーズ

var gulp = require('gulp'); // gulpを利用可能にする。
//var sass = require('gulp-ruby-sass'); //gulp-ruby-sassを利用可能にする。
var sass = require('gulp-sass'); //gulp-sassを利用可能にする。
var pleeease = require("gulp-pleeease"); //ベンダープレフィックスプラグイン。

//指定したディリクトリ/ファイルのsassファイルを指定したディリクトリにコンパイルする。
gulp.task("sass", function() {

	gulp.src("sass/style.scss")
		.pipe(sass({
			style : 'expanded'
		}))
		.pipe(pleeease({
			minifier: false // 圧縮しない
		}))
		.pipe(gulp.dest('./'))

});

どこが良くないのか、現状残念ながらわかりませんが、いずれは解決したいですね。

コメントをどうぞ!