Неверный порядок перезагрузки при использовании Gulp и browserSync

Question

Итак, я пытаюсь скомпилировать файлы с мошенником (jade), javascript и sass с помощью Gulp V4 и использовать browserSync для перезагрузки браузера при изменении любого из этих файлов. Там есть много руководств, но независимо от того, каким образом я пишу код, он просто не выглядит правильно. Im, используя gulp.series, чтобы установить порядок задач, но browserSync не хочет играть в мяч.

Вот печать моего файла Глоток:

var gulp = require('gulp'), 
... etc. 

var paths = { 
    sass: ['src/scss/**/*.scss'], 
    js: ['src/js/**/*.js'], 
    pug: ['src/**/*.pug'] 
}; 

// Shared Tasks: 
//*------------------------------------*/ 

gulp.task('clean', function(done){ 
    del(['dist/assets/**/*.css', 'dist/assets/**/*.map', 'dist/assets/**/*.js']); 
    done(); 
}); 

// App Specific Tasks: 
//*------------------------------------*/ 

// Sass 
gulp.task('build-sass', function(){ 
    gulp.src(paths.sass) 
     return sass(paths.sass, { 
      style: 'expanded' 
     }) 
     .on('error', sass.logError) 
     .pipe(prefix('last 2 version', '> 1%', 'ie 8', 'ie 9')) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('dist/assets/css')) 
     .pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 })) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(gulp.dest('dist/assets/css')); 
}); 

// JS 
gulp.task('build-js', function(done){ 
    gulp.src(paths.js) 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('dist/assets/js')) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     .pipe(gulp.dest('dist/assets/js')) 
     done(); 

// Pug 
gulp.task('build-pug', function buildHTML(done){ 
    gulp.src(['src/**/*.pug'], { 
     base: 'src' 
    }) 
    .pipe(pug()) 
    .pipe(gulp.dest('./dist/')) 
    done(); 
}); 


// Service Tasks: 
//*------------------------------------*/ 

// Delete the compiled views dir. 
gulp.task('remove', function(done){ 
    del(['dist/views/**/']); 
    done(); 
}); 

// Serve the site locally and watch for file changes 
gulp.task('serve', function(done){ 
    browserSync.init({ 
     server: { 
      baseDir: './dist/', 
      notify: false, 
      open: false 
     } 
    }); 

    // Watch & Reload Pug Files 
    gulp.watch([paths.pug], gulp.series('build-pug')).on('change', browserSync.reload); 
    // Watch & Reload Sass Files 
    gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload); 
}); 


gulp.task('default', gulp.series('clean', 'build-sass', 'build-js', 'build-pug', 'remove', 'serve', function(done){ 
    done(); 
})); 

И выходы логтерминальных консольным это при запуске глоток:

$ gulp 
[13:09:33] Using gulpfile ~/Dropbox Aaron/Dropbox (Personal)/01_Me/01_Dev/01_My Work/*Template/gulpfile.js 
[13:09:33] Starting 'default'... 
[13:09:33] Starting 'clean'... 
[13:09:33] Finished 'clean' after 2.64 ms 
[13:09:33] Starting 'build-sass'... 
[13:09:33] Finished 'build-sass' after 443 ms 
[13:09:33] Starting 'build-js'... 
[13:09:33] Finished 'build-js' after 4.42 ms 
[13:09:33] Starting 'build-pug'... 
[13:09:33] Finished 'build-pug' after 3.15 ms 
[13:09:33] Starting 'remove'... 
[13:09:33] Finished 'remove' after 656 μs 
[13:09:33] Starting 'serve'... 
[BS] Access URLs: 
------------------------------------- 
     Local: http://localhost:3000 
    External: http://10.130.91.51:3000 
------------------------------------- 
     UI: http://localhost:3001 
UI External: http://10.130.91.51:3001 
------------------------------------- 
[BS] Serving files from: ./dist/ 

И это, когда я изменить файл в отслеживаемых файлах:

[BS] File changed: src/scss/4_elements/_elements.page.scss 
[13:12:33] Starting 'build-sass'... 
[13:12:34] write ./style.css 
[13:12:34] Finished 'build-sass' after 366 ms 

Так что, как мне кажется, в этом случае файл меняется, браузерSyn c перезагружает страницу, а затем запускается «build-sass». Это неправильный путь. Я, очевидно, хочу построить sass, а затем перезагрузить страницу. Я должен сохранить 2 раза для браузера, чтобы обновить код, который я хочу.

Некоторые из кода, который я использовал непосредственно из документации browserSync:

https://www.browsersync.io/docs/gulp#gulp-reload

Это не похоже на работу.

Answer 1

Вывод журнала выглядит правильно. Сначала он запускает «по умолчанию», а затем выполняет ряд задач. Позже, когда вы изменяете файл sass, он запускает «build-sass». Единственная проблема заключается в том, что он не перезагружается через browserSync.reload(). Поэтому я считаю, что проблема может быть здесь:

gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload); 

Я настоятельно рекомендую

https://github.com/gulpjs/gulp/blob/4.0/docs/recipes/minimal-browsersync-setup-with-gulp4.md

что рецепт gulp4.0 делать именно то, что вы пытаетесь сделать. Я использую в значительной степени то, что у них есть, поэтому, если у вас есть проблемы с получением кода на работу, я могу помочь. Вот мой рабочий код:

function serve (done) { 
    browserSync.init({ 
    server: { 
    baseDir: "./", 
    index: "home.html" 
    }, 
    ghostMode: false 
}); 
done(); 
} 

function reload(done) { 
    browserSync.reload(); 
    done(); 
} 

var paths = { 
    styles: { 
    src: "./scss/*.scss", 
    dest: "./css" 
    }, 
    scripts: { 
    src: "./js/*.js", 
    dest: "./js" 
    } 
}; 

function watch() { 
    gulp.watch(paths.scripts.src, gulp.series(processJS, reload)); 
    gulp.watch(paths.styles.src, gulp.series(sass2css, reload)); 
    gulp.watch("./*.html").on("change", browserSync.reload); 
} 

var build = gulp.series(serve, watch); 

gulp.task("sync", build); 

function sass2css() { 
    return gulp.src("./scss/*.scss") 
    .pipe(cached("removing scss cached")) 
    // .pipe(sourcemaps.init()) 
    .pipe(sass().on("error", sass.logError)) 
    // .pipe(sourcemaps.write("./css/sourceMaps")) 
    .pipe(gulp.dest("./css")); 
} 

function processJS() { 
    return gulp.src("./js/*.js") 
    .pipe(sourcemaps.init()) 
    // .pipe(concat("concat.js")) 
    // .pipe(gulp.dest("./concats/")) 
    // .pipe(rename({ suffix: ".min" })) 
    // .pipe(uglify()) 
    .pipe(sourcemaps.write("./js/sourceMaps/")) 
    .pipe(gulp.dest("./js/maps/")); 
} 

Обратите внимание на общее использование функций вместо «задач» и, в частности функции Reload (сделано). Вы можете попробовать просто добавив, что в операторы часов как

gulp.watch([paths.sass], gulp.series('build-sass', reload); 

после того, как вы добавили функцию перезагрузки, которая может быть достаточно, чтобы решить вашу проблему, не делая все другие изменения, как в моем коде. Или вам просто нужно добавить оператор return в свою задачу «build-sass», чтобы gulp знал, что эта задача завершена. Удачи.