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

Javascript 输入文件的目录结构在输出时变平,javascript,css,coffeescript,sass,gulp,Javascript,Css,Coffeescript,Sass,Gulp,我在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'); v

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

目录结构的信息保存在“file.base”中。下面的代码告诉我“gulpruby 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'));
});
幸运的是,这个问题已经被报道了。很快就会修好的

另外,“base”应该是一个绝对路径,在本例中不需要指定“{base:sassDir}”。它由给定的全局模式自动确定


我写了一个答案。看看它: