正确 gulp-目的地

Question

我已经 gulp 在我的项目上第一次配置了全局和本地版本 3.9.1，并设置了一个 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'])
});

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

Answer 1

当您使用 globs (**) 时，它将保留原始文件夹结构。您还可以选择 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'])
});

我并没有真正检查你的代码，但它在我的一个构建系统中工作。

正确 gulp-目的地

Correct gulp-destination

gulp

gulp-watch

gulp-sass