Часы Gulp sass создают новую папку CSS - PullRequest
Новая
       8

Часы Gulp sass создают новую папку CSS

0 голосов
/ 19 октября 2018

У меня 2 проблемы с часами gulp sass

1 - когда я сохраняю свой файл sass, gulp создает дополнительную папку css, и у меня уже есть одна

2 - часы gulp следят только за моим стилем.scss, а не другие файлы внутри других папок

  • Структура моего проекта 

    assets
   css
     style.css
   sass
     1-basics
         _base.scss
         _colors.scss
     2-layout
         _grid.scss
         _header.scss
   style.scss

index.html

gulp 

const gulp          = require('gulp');
const watch         = require('gulp-watch');
const sass          = require('gulp-sass');
const bs            = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('sass', function () {
    return gulp.src('assets/sass/**/*style.scss')
                .pipe(sass())
                .pipe(gulp.dest('./assets/css'))
                .pipe(bs.reload({stream: true}));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("assets/sass/**/*style.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

1 Ответ

0 голосов
/ 19 октября 2018

Я изменил несколько частей вашего кода, см. Комментарии: 

const gulp          = require('gulp');

// you are not using the following require, gulp.watch is not the watch plugin below
// it is a function of the gulp object required above
//  const watch         = require('gulp-watch');

const sass          = require('gulp-sass');
const bs            = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });

    // note I moved the watch tasks to within the browser-sync task
    // and changed the sass watch glob below
    // so it watches both the partials and style.scss

    gulp.watch("assets/sass/**/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

gulp.task('sass', function () {
    // this appears to be the correct path to your style.scss file
    return gulp.src('assets/style.scss')
                .pipe(sass())

                // with the change to the gulp.src above, now the gulp.dest is correct
                //  before you had a globstar ** and that effects the base directory
                //  that will be used below.  Without the globstar it is a little easier
                .pipe(gulp.dest('./assets/css'))
                .pipe(bs.reload({stream: true}));
});

// moving the watch tasks now allows this simple default task
gulp.task('default', ['browser-sync']));

// below not needed now
//gulp.task('watch', ['browser-sync'], function () {
    //gulp.watch("assets/sass/**/*style.scss", ['sass']);
    //gulp.watch("*.html").on('change', bs.reload);
//});
...