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('./'))
});
どこが良くないのか、現状残念ながらわかりませんが、いずれは解決したいですね。