読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

gulpでディレクトリ構造を保持したままscssをコンパイル

Gulp.js JavaScript

スポンサードリンク

scssとsassの違いがまだわかりません。

gulpを最近使い始めてきました。

で困ったことがあって。

一緒のコードをまとめてガッチャンコしたcssを全体に適応するようにロードしてあげればいいと思いますが、今回導入したのはすでに稼働しているサービスで、cssの設計なんもされてなくてそんなことができないプロジェクトだったのね。

なので、それぞれのページでcssを別けて読み込ませたいなと思っていたんですが、scssをコンパイルしたときってそのディレクトリ構造を保持してくれんの?って思ったわけですよ。

~/scss/test/test.scss => コンパイル => ~/css/test/test.css

ってな感じで。

結論してはできたのでそれのメモ

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ファイルのどれかが更新しないとコンパイル実行してくれなかったりとちょっとめんどい部分がみえてきたのでそれはどっかで修正しようと思う。