CODEWITHSUNDEEP
javascriptgulp
MrHudson
MrHudson

Reputation: 21

Why does gulp watch run all the tasks?

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?

Upvotes: 2

Views: 1630

Answers (2)

Sebastian Blei
Sebastian Blei

Reputation: 273

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

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

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

Upvotes: 1

atilkan
atilkan

Reputation: 5008

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.

Upvotes: 0

Related Questions