Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gulp file running tasks and notifying twice

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?

like image 954
jonhobbs Avatar asked Jan 23 '15 00:01

jonhobbs


1 Answers

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

//...
.pipe(notify({message: 'Css created', onLast: true}));
like image 106
Ben Avatar answered Jan 03 '23 23:01

Ben