输入文件的目录结构在输出时变平答案

【问题标题】：Directory structure of input files getting flattened on output输入文件的目录结构在输出时变平
【发布时间】：2014-03-06 19:24:15
【问题描述】：

我的 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']);

【问题讨论】：

我写了一个答案。看吧：stackoverflow.com/a/33741640/2140095

标签： javascript css coffeescript sass gulp

【解决方案1】：

目录结构信息保存在“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

另外，'base' 应该是一个绝对路径，在这种情况下你不需要指定 '{ base: sassDir }'。它由给定的 glob 模式自动确定。

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

【讨论】：