Как исправить задачу gulp - задача css работает без остановок?

Я начинаю новый проект gulp. Существует синхронизация с браузером, и когда я запускаю gulp или gulp watch, изменяя что-то в файлах scss/css, он запускает задачу css без остановок, даже если я не выполняю что-то с css, она начинается и завершается без остановок. Если я пытаюсь что-то изменить в js, он добавляет и эту задачу, и работает без остановок как...

var themename = 'humescores';

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    browserSync = require('browser-sync').create(),
    image = require('gulp-image'),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),

    // Only work with new or updated files
    newer = require('gulp-newer'),

    // Name of working theme folder
    root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'js/',
    img = root + 'images/',
    languages = root + 'languages/';


// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'expanded', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
    return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
    .pipe(newer(img))
    .pipe(image())
    .pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
    return gulp.src([js + '*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        proxy: 'localhost-site.com',
        port: 8080
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], gulp.series('css'));
    gulp.watch(js + '**/*.js', gulp.parallel('javascript'));
    gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', gulp.parallel('images'));
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', gulp.parallel('watch'));

введите здесь описание изображения


person Влад    schedule 05.08.2019    source источник
comment
может вы пишете в тот же каталог, что и смотрите? тогда он будет запускаться каждый раз, когда записывает css.   -  person cloned    schedule 05.08.2019
comment
Что вы подразумеваете под самим триггером?   -  person Влад    schedule 05.08.2019
comment
пример: когда вы просматриваете папку abc, а затем создаете файл из scss и помещаете его под abc\generated.css, тогда ваша задача наблюдения увидит, что файл generated.css был изменен, и снова запустит задачи, снова создав abc\generated.css, что затем вызовет задачу наблюдения ....   -  person cloned    schedule 05.08.2019
comment
Да глотком смотришь папку где все эти файлы лежат... Как мне тогда сохранять файлы?   -  person Влад    schedule 05.08.2019


Ответы (1)


вы используете одну папку src, в которой вы просматриваете файлы, и одну папку dist (или как вы ее называете), в которую помещаются ваши сгенерированные файлы.

Или вы можете, например, сгенерировать файл в /css/styles.css и поместить все файлы scss в css/scss/.... и смотреть только папку css/scss.

person cloned    schedule 05.08.2019