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

Question

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

1

Ihave 2 проблемы с gulp sass watch

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

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

Моя структура проекта

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

index.html

глоток

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

Taste of Leaving 19 окт. 2018, в 00:59

Источник

0

Какой файл scss импортирует частичные файлы? Это _base.scss? Тогда вы не сделаете это частичным.
Mark 18 окт. 2018, в 23:14
0

style.scss, извините, забыл записать это, поэтому у меня есть файл с именем style.scss, и я импортировал все свои файлы, как, например, path / _header.scss
Taste of Leaving 18 окт. 2018, в 23:25

Теги:

javascript

sass

gulp

1 ответ

Ещё вопросы

Какой файл scss импортирует частичные файлы? Это _base.scss? Тогда вы не сделаете это частичным.
style.scss, извините, забыл записать это, поэтому у меня есть файл с именем style.scss, и я импортировал все свои файлы, как, например, path / _header.scss

Mark · Accepted Answer · 2018-10-19T00-43-00.000Z

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

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);
//});