Gulp 및 browserSync를 사용할 때 잘못된 재로드 순서가 발생합니다.

Question

그래서 Gulp V4로 pug (jade), javascript 및 sass 파일을 컴파일하고 이러한 파일이 변경 될 때 browserSync를 사용하여 브라우저를 다시로드하려고합니다. 거기에 많은 가이드가 있지만 코드를 작성하는 방법에 관계없이 작업 순서를 올바르게 얻지 못하는 것 같습니다. 메신저 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 

이 상황에서 필자가 생각하는 것처럼 파일이 바뀌고 있습니다. browserSyn c 페이지가 다시로드되고 'build-sass'가 시작됩니다. 어느 쪽이 잘못 돌아 갔는지. 나는 분명히 새소리를 만들고, 페이지를 새로 고침하고 싶다. 내가 원하는 코드를 새로 고치려면 브라우저를 2 번 저장해야합니다.

내가 사용했던 코드의 일부는 browserSync 문서에서 직접입니다 :

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

이 작동하지 않습니다.

Answer 1

로그 출력이 올바르게 보입니다. 먼저 '기본'을 실행 한 다음 일련의 작업을 실행합니다. 나중에 sass 파일을 수정하면 'sass 빌드'가 시작됩니다. 유일한 문제는 browserSync.reload()를 통해 다시로드되지 않는다는 것입니다. 그래서 문제가 여기에있을 수 있습니다 생각 :

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

나는 높은 gulp4.0 조리법은 당신이하려고하는 정확하게하는 것입니다

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

을 추천합니다. 나는 그들이 가지고있는 것을 거의 사용하고 있기 때문에 코드를 작동시키는 데 문제가 있다면 도움을 줄 수 있습니다. 다음은 제 작업 코드입니다 :

'tasks'대신 함수를 사용하는 것이 일반적이며, 특히 reload (done) 함수에 유의하십시오. 당신은 당신이 내 코드와 같이 다른 모든 변경하지 않고 문제를 해결하기에 충분 수도 다시로드 기능을 추가 한 후 단순히

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

처럼 시계 문에 그를 추가하려고 할 수 있습니다. 또는 gulp가 작업 완료를 알 수 있도록 return 문을 'build-sass'작업에 추가해야 할 수도 있습니다. 행운을 빕니다.