scssとsassの違いがまだわかりません。
gulpを最近使い始めてきました。
で困ったことがあって。
一緒のコードをまとめてガッチャンコしたcssを全体に適応するようにロードしてあげればいいと思いますが、今回導入したのはすでに稼働しているサービスで、cssの設計なんもされてなくてそんなことができないプロジェクトだったのね。
なので、それぞれのページでcssを別けて読み込ませたいなと思っていたんですが、scssをコンパイルしたときってそのディレクトリ構造を保持してくれんの?って思ったわけですよ。
ってな感じで。
結論してはできたのでそれのメモ
var gulp = require('gulp'); var sass = require('gulp-sass'); var minifyCss = require('gulp-minify-css'); var watch = require('gulp-watch'); var react = require('gulp-react'); var flow = require('gulp-flowtype'); var documentRoot = './'; gulp.task('sass', function() { gulp.src(documentRoot + 'scss/**/*.scss') // ここの指定がポイントです .pipe(sass()) .pipe(minifyCss()) .pipe(gulp.dest(documentRoot + 'css')); }); // watch gulp.task('watch', function() { watch(documentRoot + 'scss/**/*.scss', function() { gulp.start('sass'); }); });
コメントの通り、ここを**
にするとscssの保存されたディレクトリ階層を保持したままcssのディレクトリにコンパイルしてくれました。いやー便利便利。
しかし、scssで構文エラーが見つかるとwatch
が落ちちゃったり、scssのチェックがscssファイルのどれかが更新しないとコンパイル実行してくれなかったりとちょっとめんどい部分がみえてきたのでそれはどっかで修正しようと思う。