正确的 gulp-destination答案

【问题标题】：Correct gulp-destination正确的 gulp-destination
【发布时间】：2017-11-15 08:08:47
【问题描述】：

我第一次在我的项目中配置了全局和本地版本 3.9.1 的 gulp，并设置了一个像这样的 gulp-watch-task：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');

// vars
var SCSS_PATH ='styles/**/*.scss';
var DIST_CSS_PATH ='css/';

// Styles for SCSS
gulp.task('styles', function () {
    return gulp.src(SCSS_PATH)
    .pipe(sass())
    .pipe(minifyCss())
    .pipe(autoprefixer())
    .pipe(gulp.dest(DIST_CSS_PATH));
});

// Watch-Task
gulp.task('watch', function() {
    gulp.watch(SCSS_PATH, ['styles'])
});

现在我的监视任务成功运行并创建了一个缩小和前缀的 css 文件。但它确实是在 css/local.css/sw.css 中创建的，这显然是不正确的。我想要创建它的是 css/sw.css 我在那里做错了什么，为什么会这样？

【问题讨论】：

最初有styles/local.css/文件夹吗？那么styles/local.css/sw.scss?
不。这很奇怪。

标签： gulp gulp-watch gulp-sass

【解决方案1】：

当您使用 glob (**) 时，它将保留原始文件夹结构。您还可以选择gulp.src 和gulp.dest 的基数，如here 所述。

但是，您想要的是扁平化文件夹结构。你可以通过gulp-flatten 做到这一点。

最终会变成这样：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var flatten = require('gulp-flatten');

// vars
var SCSS_PATH ='styles/**/*.scss';
var DIST_CSS_PATH ='css/';

// Styles for SCSS
gulp.task('styles', function () {
    return gulp.src(SCSS_PATH)
    .pipe(sass())
    .pipe(minifyCss())
    .pipe(autoprefixer())
    .pipe(flatten())
    .pipe(gulp.dest(DIST_CSS_PATH));
});

// Watch-Task
gulp.task('watch', function() {
    gulp.watch(SCSS_PATH, ['styles'])
});

我并没有真正检查您的代码，但它在我的一个构建系统中运行。

【讨论】：