How to track new files in Gulp?

Question

Automation

Can you please tell me how to make Gulp watch for new files and perform some task?
For example, when adding new icons, regenerate the sprite or merge new CSS files as well. Now I have to restart Gulp so that it sees the new files and includes them in the task.

Answer 1

gulp-watch https://www.npmjs.com/package/gulp-watch can do that. if you set the right path. not specific files.

Answer 2

var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    less = require('gulp-less'),
    concat = require('gulp-concat-css'),
    autoprefixer = require('gulp-autoprefixer')

//Запускает локальный сервер в реальном времени
gulp.task('browser-sync', function () {
    browserSync({
        server: {
            baseDir: 'app'
        }
    });
});

gulp.task('style', function () {
    gulp.src('app/dist/less/**/*.less')
        .pipe(less())
        .pipe(concat('style.css'))
    .pipe(autoprefixer({
            browsers: ['last 12 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('app/dist/css/'))
    .pipe(browserSync.reload({
            stream: true
        }))
});

gulp.task('html', function () {
    gulp.src('app/**/*.html')
        .pipe(browserSync.reload({
            stream: true
        }));
});


//Отслеживает изменение в файлах и запускает необходимое функцию
gulp.task('watch', function () {
    gulp.run('style', 'html'); //запуск
    gulp.watch('app/dist/less/**/*.less', function (event) {
        gulp.run('style');
    });
});

Answer 3

gulp-changed or gulp-watch to help.