2014-02-09 65 views
1

我在我的app/assets/sass /目錄中有一個分層結構,我試圖在public/css/的CSS輸出文件中進行鏡像,但是我的sass中的所有* .scss文件目錄和子目錄正被放入根目錄public/css/文件夾中。輸出文件的目錄結構在輸出上變平坦

這裏是我的gulpfile: 當我註釋掉的目錄結構保持gulp.src(sassDir ...).pipe(gulp.dest('public/css'));之間的界限,但SASS未編譯。取消註釋.pipe(sass(...))行重現此問題。

var gulp = require('gulp'); 
var plumber = require('gulp-plumber'); 
var gutil = require('gulp-util'); 
var minifycss = require('gulp-minify-css'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sass = require('gulp-ruby-sass'); 
var coffee = require('gulp-coffee'); 

var sassDir = 'app/assets/sass/'; 
var coffeeDir = 'app/assets/coffee/'; 

gulp.task('sass', function() { 
    return gulp.src(sassDir + '**/*.scss', { base: sassDir }) 
     .pipe(plumber()) 
     .pipe(sass({ style: 'compress' }).on('error', gutil.log)) 
     .pipe(autoprefixer('last 10 versions')) 
     .pipe(minifycss()) 
     .pipe(gulp.dest('public/css')); 
}); 

gulp.task('coffee', function() { 
    return gulp.src(coffeeDir + '**/*.coffee', { base: coffeeDir }) 
     .pipe(plumber()) 
     .pipe(coffee({ bare: true }).on('error', gutil.log)) 
     .pipe(gulp.dest('public/js/coffee)')); 
}); 

gulp.task('watch', function() { 
    gulp.watch(sassDir + '/**/*.scss', ['sass']); 
    gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']); 
}); 


gulp.task('default', ['sass', 'coffee', 'watch']); 
+0

我寫了一個答案。看看它:http://stackoverflow.com/a/33741640/2140095 – brnmonteiro

回答

3

目錄結構信息保存在'file.base'中。下面的代碼告訴我'gulp-ruby-sass'正在改變'file.base'。

gulp.task('sass', function() { 
    return gulp.src(sassDir + '**/*.scss') 
     .on('data', function (file) { console.log(0, file.base); }) 
     .pipe(plumber()) 
     .on('data', function (file) { console.log(1, file.base); }) 
     .pipe(sass({ style: 'compress' }).on('error', gutil.log)) 
     .on('data', function (file) { console.log(2, file.base); }) 
     .pipe(autoprefixer('last 10 versions')) 
     .on('data', function (file) { console.log(3, file.base); }) 
     .pipe(minifycss()) 
     .on('data', function (file) { console.log(4, file.base); }) 
     .pipe(gulp.dest('public/css')); 
}); 

幸運的是,這個問題已經被報道。它會很快被修復。

https://github.com/sindresorhus/gulp-ruby-sass/pull/20

而且,「基地」應該是絕對路徑,你並不需要指定「{基地:sassDir}」在這種情況下。它由給定的glob模式自動確定。

https://github.com/wearefractal/glob-stream