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']);