gulp watch为什么要运行所有任务？

Question

I have a gulpfile.js to compile my sass and javascript. At the bottom of the file I have a task that watches for changes in any of the sass or javascript files:

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

// Styles
gulp.task('styles', function() {
    return gulp.src('sass/**/*.scss')
        .pipe(sass({ style: 'expanded', }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('web'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('web'));
});

// Scripts
gulp.task('scripts', function() {
    return gulp.src('js/**/*.js')
        .pipe(jshint('node_modules/gulp-jshint/.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('web'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest('web'));
});

// Images
gulp.task('images', function() {
    return gulp.src('img/**/*')
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('web'));
});

// Clean
gulp.task('clean', function() {
    return gulp.src(['web'], {read: false})
        .pipe(clean());
});

// Default task
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

// Start livereload
gulp.task('start-livereload', function () {
    server.listen(35729, function (err) {
        if (err) {
            return console.log(err);
        }
    });
});

// Watch
gulp.task('dev', ['start-livereload'], function() {

    console.log('running');

    // Watch .scss files
    gulp.watch('sass/**/*.scss', {mode: 'poll'}, ['styles']);

    // Watch .js files
    gulp.watch('js/**/*.js', {mode: 'poll'}, ['scripts']);

    // Watch image files
    gulp.watch('img/**/*', {mode: 'poll'}, ['images']);

    // Create LiveReload server
    var server = livereload();

    // Watch any files in dist/, reload on change
    gulp.watch(['web/**']).on('change', function(file) {
        server.changed(file.path);
    });

});

When I run gulp dev in terminal and change a sass file both the sass compiler and javascript compiler run. The same thing happens when I change a javascript file.

How can I change it so that I only compile Sass when a sass file is changed and only compile javascript when a javascript file is changed?

Answer 1

Have you noticed, you watch for file changes in the source AND destination directory? So, maybe, if the source is changed and gets compiled, the destination directory gets touched. And this will inherit the watch task of the destination directory.

Also, you set the destination in styles and scripts task twice:

.pipe(gulp.dest('web'));

With best regards.

Answer 2

I write here my experience, maybe helps someone.

I use Dropbox for my project and work there. When Dropbox is open, tasks run twice because Dropbox detects file change and does something, that triggers the task again.