Gulp + Growl +瀏覽器同步通知

Question

我使用gulp和咆哮。我創建這個gulpfile.js：

var gulp = require("gulp"); 
var less = require("gulp-less"); 
var notifier = require('node-notifier'); 
var notify = require("gulp-notify"); 
var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('less', function() { 
var trete; 
console.log(trete); 
gulp.src('css/main.less') 
.pipe(less()) 
.on('error', function(err){ 
    trete = err.message; 
    notifier.notify({ 
     'title': 'My notification', 
     'message': trete 
    }); 
    return false; 
}) 
.pipe(notify("Всё заебись!")) 
.pipe(gulp.dest('css/')) 
}); 

gulp.task('bs-reload', function() { 
browserSync.reload(); 
}); 
gulp.task('browser-sync', function() { 
browserSync.init(['css/*.css', 'js/*.js'], { 
    server: { 
     baseDir: './' 
    } 
}); 
}); 

gulp.task('watch', function() { 
gulp.watch('css/**', ['less']); 
gulp.run('less'); 
gulp.watch(['*.html'], ['bs-reload']); 
}); 

gulp.task('default', ['less', 'browser-sync', 'watch']); 

當我運行一飲而盡，咆哮顯示了兩個通知和瀏覽器同步兩次刷新頁面。也許我做錯了什麼？

Answer 1

您在'默認'任務中運行'less'兩次。它的第一個依賴任務將運行，然後由於gulp.run而在「監視」任務中再次運行。

刪除'watch'任務中的gulp.run。

相反，爲'watch'任務添加'less'作爲依賴任務。

您可能想要流式傳輸而不是整頁重新加載，因此最後通過這種方式管道較少。

.pipe(gulp.dest(cssPath)) 
.pipe(browserSync.stream()); 

你的任務不返回他們的流，他們將永遠不會完成由於這一點。任務應該總是返回一個流或者進行完成回調，並且如果它們是異步的，則調用它。

var gulp = require("gulp"); 
var less = require("gulp-less"); 
var notifier = require('node-notifier'); 
var notify = require("gulp-notify"); 
var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('less', function() { 
    return gulp.src('css/main.less') 
     .pipe(less()) 
      .on('error', function(err){ 
       notifier.notify({ 
        'title': 'My notification', 
        'message': err.message 
       }); 
       return false; 
      }) 
     .pipe(notify("Всё заебись!")) 
     .pipe(gulp.dest('css/')) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('browser-sync', ['less'], function() { 
    browserSync.init({ 
     server: { 
      baseDir: './' 
     } 
    }); 
}); 

gulp.task('watch', ['less'], function() { 
    gulp.watch('css/**', 'less'); 
    gulp.watch('*.html').on('change', reload); 
}); 

gulp.task('default', ['browser-sync', 'watch']);