node.js - gulp.dest() 忽略子目录

Question

我的文件夹树

public_html/
- css/
- - bootstrap.css
- - theme.css
- scss/
- - bootsrap/
- - - bootstrap.scss
- - theme/
- - - theme.scss

我的 gulpfile :

var gulp = require('gulp');

//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';

//Compile Styles
gulp.task('CompileSASS', function () {
    gulp.src(scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(cssPath))
});

gulp.task('watchSASS', function () {
    gulp.watch(scssPath, ['CompileSASS']);
});

gulp.task('default', ['CompileSASS', 'watchSASS']);

---

发生了什么

当我运行 gulpfile 的默认方法时，生成的 CSS 文件保存在 CSS 文件夹的子文件夹中。

/public_html/css/bootstrap/bootstrap.css

/public_html/css/theme/theme.css

---

需要什么

我不想将它们保存在单独的文件夹中。

如何将所有生成的 CSS 文件直接保存在 CSS 目录中，例如:

/public_html/css/bootstrap.css

/public_html/css/theme.css

Answer 1

你应该看看gulp-rename

尝试:

var gulp = require('gulp');

//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');

var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';

//Compile Styles
gulp.task('CompileSASS', function () {
    gulp.src(scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        //--------
        .pipe(rename({dirname: cssPath}))
        //--------
        .pipe(gulp.dest('./'))
});

gulp.task('watchSASS', function () {
    gulp.watch(scssPath, ['CompileSASS']);
});

gulp.task('default', ['CompileSASS', 'watchSASS']);