Gulp 吞咽观察任务序列和浏览器同步

我是一个新的使用Gulp，只是试图学习它…现在我得到的问题，我想问的是如何设置默认任务与手表和浏览器同步包括在内 我需要知道我做错什么了吗

有人能改进我的代码吗，我不了解监视和浏览器同步的关系，在浏览器同步之前运行哪些任务以及何时监视

下面是我的文件夹结构

var gulp=require（'gulp'）；
var browserSync=require（'browser-sync'）；
var reload=browserSync.reload；
var-uglify=需要（'gulp-uglify'）；
var less=需要（'gulp-less'）；
var管道工=需要（“大口管道工”）；
var cssmin=require（'gulp-cssmin'）；
var rename=require（'gulp-rename'）；
var htmlmin=require（'gulp-htmlmin'）；
var-imagemin=require（'gulp-imagemin'）；
//脚本任务
//丑陋
gulp.task（'scripts'，function（））{
gulp.src（'js/*.js'）
.管子（管道工（））
.管道（丑（）
.管道（吞咽目的地（“建造/施工”）；
});
//压缩图像
gulp.task（'imagemin'，function（）{
gulp.src（'img/***.+（png | jpg | gif | svg'））
.pipe（缓存（imagemin({
交错：对
})))
.管道（吞咽目的地（“建造/安装”）；
});
//CSS样式
吞咽任务（'less'，函数（）{
gulp.src（'less/style.less'）
.管子（管道工（））
.管道（小于（）
.pipe（吞咽目标（“构建/css”）；
});
gulp.task（'cssmin'，function（）{
gulp.src（'build/css/style.css'）
.管子（管道工（））
.pipe（cssmin（））
.pipe（重命名（{后缀：'.min'}））
.pipe（gulp.dest（'build/css'））
.pipe（重新加载（{stream:true}））；//注入浏览器
});
gulp.task（'htmlmin'，function（）{
返回gulp.src（'*.html'）
.pipe（htmlmin（{removeComments:true}））
.pipe（吞咽目标（“构建”））
.pipe（重新加载（{stream:true}））；//注入浏览器
});
//浏览器同步任务，只关心已编译的CSS
gulp.task（'browser-sync'，function（））{
browserSync（['css/*.css'，'js/*.js'，'less/*.less'，'images/*']{
服务器：{
baseDir:“./”
}
});
});
/*观看scss、js和html文件，对它们做不同的事情*/
gulp.task（'default'，['browser-sync'，'scripts'，'less'，'cssmin'，'htmlmin'，'imagemin'，函数（）{
/*观察SCS，根据变化运行sass任务*/
大口喝手表（['less/***/.less']，['less']）
//观看css min
gulp.watch（['build/css/*.css']，['cssmin']）
/*查看app.js文件，在更改时运行脚本任务*/
gulp.watch（['js/*.js']，['scripts']）
/*查看.html文件，在更改时运行bs重新加载任务*/
gulp.watch（['*.html']，['htmlmin']）；
//gulp.watch（'app/*.html'，browser sync.reload）；
//gulp.watch（'app/js/***.js'，browser sync.reload）；
});如果您的目标是在开发模式下运行，那么此时我不会担心缩小，这适用于imagemin（我无论如何都会脱机运行）、cssmin、htmlmin和默认运行uglify的js任务。理想情况下，您希望在浏览器中进行调试，而将代码缩小对您没有多大帮助。如果添加
dist
任务以执行缩小步骤

我知道你需要更少的CSS，原因很明显。所以你在寻找这样的东西：

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var sass = require('gulp-less');

// Static Server + watching less/html files
gulp.task('serve', ['less'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("less/*.less", ['less']);
    gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task('less', function(){
  gulp.src('less/style.less')
  .pipe(plumber())
  .pipe(less())
  .pipe(gulp.dest('build/css'))
  .pipe(browserSync.stream());

});

gulp.task('default', ['serve']);

此代码调用
service
作为主要任务<代码>服务

任务的依赖项<代码>较少（将首先调用）。然后，最终调用回调。BrowserSync已初始化，并为html文件和less文件添加了一个监视

---

如果您想了解更多有关gulp+browsersync集成的信息，请查看。

非常感谢@alan souza:因此，我应该在完成开发后单独完成一项任务以缩小规模……这是一个很好的提示……再次感谢