Question

我第一次在我的项目中使用全局和本地版本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 我在那里做错了什么，为什么会这样？

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-destination

1 个答案: