Gulp создаёт папку css в папке sass

Web
#1

При компиляциии gulp создаёт папку sass папку css что делать

#2

Так а что не так?

#3

папка css уже есть галп при компиляции создает новую только sass

#4

галп должен откомпилированые файлы должен слаживать в css а не создавать новую

#5 
var gulp        = require('gulp');

var browserSync = require('browser-sync');

var sass        = require('gulp-sass');

var cleanCSS = require('gulp-clean-css');

var autoprefixer = require('gulp-autoprefixer');

var rename = require("gulp-rename");

gulp.task('server', function() {

    browserSync({

        server: {

            baseDir: "src"

        }

    });

    gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('styles', function() {

    return gulp.src(['app/sass/*.sass', 'app/sass/*.scss'])

        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))

        .pipe(rename({suffix: '.min', prefix: ''}))

        .pipe(autoprefixer())

        .pipe(cleanCSS({compatibility: 'ie8'}))

        .pipe(gulp.dest('src/css'))

        .pipe(browserSync.stream());

});

gulp.task('watch', function() {

    gulp.watch("src/sass/**/*.scss",['sass']), gulp.parallel('styles');

})

gulp.task('default', gulp.parallel('watch', 'server', 'styles'));

что тут не так

#6

Ничего непонятно. Что происходит при компиляции, какие папки и с каким содержимым создаются?
Как он может папку sass создать, если оттуда видимо и берутся исходные файлы?

#7

неправильно меня поняли не папку sass он создает. Он в папке sass создает папку css после компиляции

#8

Разве вот здесь:

не должно быть:

.pipe(gulp.dest('app/css'))

И здесь

зачем то указан путь два раза :clkolscratch_one_s_head:
И в общем по коду пути проекта перемешаны:

app/sass/*

с

src/sass/*

Проект в папке app или в src ?

#9

проект в папке src

#10 
var gulp        = require('gulp');

var browserSync = require('browser-sync');

var sass        = require('gulp-sass');

var cleanCSS = require('gulp-clean-css');

var autoprefixer = require('gulp-autoprefixer');

var rename = require("gulp-rename");

gulp.task('server', function() {

    browserSync({

        server: {

            baseDir: "src"

        }

    });

    gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('styles', function() {

    return gulp.src('./sass/**/*.scss')

        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))

        .pipe(rename({suffix: '.min', prefix: ''}))

        .pipe(autoprefixer())

        .pipe(cleanCSS({compatibility: 'ie8'}))

        .pipe(gulp.dest('./css'))

        .pipe(browserSync.stream());

});

gulp.task('watch', function() {

    gulp.watch('./sass/**/*.scss', ['sass']);

})

gulp.task('default', gulp.parallel('watch', 'server', 'styles'));

я уже вот так пробывал все ровно одно и тоже

#11

Возможно дело в этом

https://github.com/gulpjs/gulp/blob/master/docs/api/concepts.md#glob-base

надо что-то типа этого

.src('./sass/**/*.scss', {base: './css'})
#12

попробовал по вашему все тоже самое ни чего не изменилось

#13

А, да, base не это делает.

Хм, у меня и так работает.

Может просто gulp сильно старый?

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-clean-css": "^4.3.0",
    "gulp-cli": "^2.3.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0"
  }
}

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");

gulp.task('styles', function() {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(autoprefixer())
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('./css'));
});

alex@pop-os:~/myproject$ tree -I node_modules
.
├── gulpfile.js
├── package.json
├── package-lock.json
└── sass
    ├── foo
    │   └── bar.scss
    └── style.scss

2 directories, 5 files

alex@pop-os:~/myproject$ node_modules/.bin/gulp styles
[01:57:55] Using gulpfile ~/myproject/gulpfile.js
[01:57:55] Starting 'styles'...
[01:57:55] Finished 'styles' after 52 ms

alex@pop-os:~/myproject$ tree -I node_modules
.
├── css
│   ├── foo
│   │   └── bar.min.css
│   └── style.min.css
├── gulpfile.js
├── package.json
├── package-lock.json
└── sass
    ├── foo
    │   └── bar.scss
    └── style.scss

4 directories, 7 files