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.css

     

/的public_html / CSS /的主题 /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']);