Correct gulp-destination

Question

I have gulp configured the first time on my project with the global and local version 3.9.1 and set up a gulp-watch-task like that:

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'])
});

Now my watch task runs successfully and creates a css-file minified and prefixed. BUT it does created in css/local.css/sw.css which is obviously not correct. What I want it to be created is css/sw.css What do I do wrong there and why is that?

Answer 1

When you use globs (**) it will keep the original folder structure. You can also choose the base for gulp.src and gulp.dest, as explained here.

What you want, however, is to flatten the folder structure. You can do that with gulp-flatten.

It would be end up as something like this:

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'])
});

I didn't really check with your code, but it worked in one of my build systems.