Gulp file running tasks and notifying twice

Question

I've just started using gulp for the first time, required all the plugins I want to use and written the first task for sass compilation. It seems to work but there are two problems, firstly when I type gulp on the command line it seems to take 3 or 4 seconds to start which seems slower than grunt (I started using gulp because I understood it was faster). Is this normal?

The main problem though is that I have a default task which calls the sass task. The command line output seems to suggest that both are being run which means the sass is being compiled twice. It is also outputting my single gulp-notify notification twice which doesn't seem right.

Here is the command line output...

λ gulp default
[00:53:40] Using gulpfile ~\Desktop\jon\gulpfile.js
[00:53:40] Starting 'sass'...
[00:53:40] Finished 'sass' after 10 ms
[00:53:40] Starting 'default'...
[00:53:40] Finished 'default' after 7.93 μs
[00:53:41] gulp-notify: [Gulp notification] Css created
[00:53:41] gulp-notify: [Gulp notification] Css created

And here is my gulp file in full...

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    compass = require('gulp-compass'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    jshint = require('gulp-jshint'),
    autoprefixer = require('gulp-autoprefixer'),
    minifyCSS = require('gulp-minify-css'),
    traceur = require('gulp-traceur'),
    svgmin = require('gulp-svgmin'),
    imagemin = require('gulp-imagemin'),
    ngAnnotate = require('gulp-ng-annotate'),
    expect = require('gulp-expect-file'),
    sourcemaps = require('gulp-sourcemaps');

var paths = {
    src: "src",
    css: "stylesheets",
    img: "images",
    js:  "js"
}


// Compile Our Sass
gulp.task('sass', function() {

    gulp.src(paths.src + '/sass/*.scss')
        .pipe(sourcemaps.init())
        .pipe(compass({
            sass: 'src/sass',
            environment: 'development',
            outputStyle: 'expanded',
            debugInfo: false,
            noLineComments: true
        }))
        .pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.css))
        .pipe(notify({ message: 'Css created' }));

});


// Dev Task
gulp.task('default', ['sass']);

Anybody know what's going on here? Have I misunderstood how Gulp tasks work?

Half guess: notify runs on each file that passes through. In that case you have both css and sourcemap file. — Heikki, Jan 23 '15 at 09:10
Maybe I just don't understand how piping works, but I didn't think the created sourcemap would be passed through the pipe in addition to the css files that were being passed through. — jonhobbs, Jan 23 '15 at 14:59
Sourcemap is there. You can see it with `.pipe(notify('<%= file.relative %>'))` — Heikki, Jan 23 '15 at 15:45

score 19 · Accepted Answer · answered Jan 23 '15 at 15:20

19

Use the onLast option of gulp-notify if you only want a single notification per-stream:

//...
.pipe(notify({message: 'Css created', onLast: true}));

answered Jan 23 '15 at 15:20

Ben

10,056
5
41
42

That's very handy. Are you able to confirm that the output log is just telling me that it's running SASS then DEFAULT, not running the sass task twice (because it's part of default). – jonhobbs Jan 23 '15 at 15:26
The `default` task as you have defined it does nothing. So gulp runs the dependencies of `default` first, then runs your no-op `default` task. If it were running `sass` twice, you would see it twice in the output. – Ben Jan 23 '15 at 15:38

Gulp file running tasks and notifying twice

1 Answers1