Gulp 观看任务序列和浏览器同步

Question

我是 Gulp 的新手，只是想学习它...现在我遇到并想问的问题是如何设置包含手表和浏览器同步的默认任务我需要知道我做错了什么

任何人都可以在这里改进我的代码，我不明白 watch 和浏览器同步的关系，在浏览器同步之前运行哪些任务以及什么时候 watch

下面是我的文件夹结构

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var plumber= require('gulp-plumber');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var imagemin = require ('gulp-imagemin');

//scripts task
//uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
 .pipe(plumber())
 .pipe(uglify())
 .pipe(gulp.dest('build/js'));
});


//compress images
gulp.task('imagemin', function(){
        gulp.src('img/**/*.+(png|jpg|gif|svg)')
        .pipe(cache(imagemin({
      interlaced: true
    })))
        .pipe(gulp.dest('build/img'));
});

//CSS styles
gulp.task('less', function(){
 gulp.src('less/style.less')
 .pipe(plumber())
 .pipe(less())
 .pipe(gulp.dest('build/css'));
 
});

gulp.task('cssmin', function(){
gulp.src('build/css/style.css')
  .pipe(plumber())
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('build/css'))
  .pipe(reload({stream:true})); // inject into browsers

});

gulp.task('htmlmin', function(){
  return gulp.src('*.html')
    .pipe(htmlmin({removeComments: true}))
    .pipe(gulp.dest('build'))
    .pipe(reload({stream:true})); // inject into browsers
});



// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
    browserSync(['css/*.css', 'js/*.js','less/*.less', 'images/*'],{
        server: {
            baseDir: "./"
        }
    });
});



/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['browser-sync' , 'scripts', 'less', 'cssmin', 'htmlmin', 'imagemin'], function () {
    /* Watch scss, run the sass task on change. */
    gulp.watch(['less/**/*.less'], ['less'])
    //Watch css min
    gulp.watch(['build/css/*.css'], ['cssmin'])
    /* Watch app.js file, run the scripts task on change. */
    gulp.watch(['js/*.js'], ['scripts'])
    /* Watch .html files, run the bs-reload task on change. */
    gulp.watch(['*.html'], ['htmlmin']);



     // gulp.watch('app/*.html', browser-sync.reload); 
    // gulp.watch('app/js/**/*.js', browser-sync.reload); 
});

现在我想要的流程是

编译 less 到 css，然后将其缩小到 build 文件夹
列表项
然后缩小我的 HTML 代码
然后缩小并连接我的 js
压缩所有图像（运行仅当某些图像发生变化时）
运行使用浏览器同步缩小 HTML 并观察我所有源 HTML、Less、图像和 JS 的变化

Answer 1

如果你的目标是运行在开发模式下，我现在不会担心缩小，这适用于 imagemin（无论如何我都会离线），cssmin，htmlmin，以及默认情况下运行s 丑化的 js 任务。理想情况下，您会希望在浏览器中进行调试，而缩小代码对您的帮助不大。如果您添加 dist 任务来执行缩小步骤。

我知道出于显而易见的原因，您需要 Less to 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']);

此代码调用 serve 作为主要任务。 Serve 任务具有 less 作为依赖项（将首先调用）。然后，最终调用回调。 BrowserSync 已初始化，并为 html 个文件和更少的文件添加了监视。

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

Gulp 观看任务序列和浏览器同步

Gulp watch task sequence and Browser Sync

gulp

gulp-less

gulp-watch

gulp-uglify