browsersync + gulp 주입 안 함 CSS 만 다시로드

Question

최근에 BrowserSync를 사용하여 이동했습니다. 그 중 gulp guide을 따라 갔고 몇 가지 문제를 해결하기 위해 몇 가지를 조정했습니다. 그러나 지금은 작동하는 동안 페이지가 다시로드되는 것처럼 보입니다. CSS를 삽입하는 것이 아니라 시간을 절약 할 수 있습니다.

내 꿀꺽 파일 :

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create(); 
var concat = require('gulp-concat'); 
var rename = require('gulp-rename'); 
var sass = require('gulp-sass'); 
var postcss = require('gulp-postcss'); 
var cleanCSS = require('gulp-clean-css'); 
var uglify = require('gulp-uglify'); 
var sourcemaps = require('gulp-sourcemaps'); 
var autoprefixer = require('autoprefixer'); 

gulp.task('scripts', function() { 
    return gulp.src([ 
     'js/dev/main/**/*.js', 
     // We have to set the bootstrap lines separately as some need to go before others 
     'js/dev/bootstrap/alert.js', 
     'js/dev/bootstrap/collapse.js', 
     'js/dev/bootstrap/tooltip.js', 
     'js/dev/bootstrap/popover.js', 
     'js/dev/bootstrap/tab.js', 
     'js/dev/bootstrap/transition.js', 
    ]) 
     .pipe(sourcemaps.init()) 
      .pipe(concat('scripts.js')) 
     .pipe(sourcemaps.write('../maps')) 
     .pipe(gulp.dest('./js')); 
}); 

gulp.task('uglify', ['scripts'], function() { 
    return gulp.src('js/scripts.js') 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify({ 
      mangle: false 
     })) 
     .pipe(gulp.dest('./js')); 
}); 

// create a task that ensures the `uglify` task is complete before 
// reloading browsers 
gulp.task('js-watch', ['uglify'], function (done) { 
    browserSync.reload(); 
    done(); 
}); 

/* Creates the standard version */ 

gulp.task('styles', function() { 
    return gulp.src('scss/**/*.scss') 
     .pipe(sourcemaps.init()) 
      .pipe(sass().on('error', sass.logError)) 
      .pipe(postcss([ 
       autoprefixer({ 
        browsers: [ 
         'last 4 Chrome versions', 
         'last 4 Firefox versions', 
         'last 4 Edge versions', 
         'last 2 Safari versions', 
         'ie >= 10', 
         '> 1.49%', 
         'not ie <= 9' 
        ], 
        cascade: false 
       }), 
      ])) 
     .pipe(sourcemaps.write('../maps')) 
     .pipe(gulp.dest('./css/')) 
     .pipe(browserSync.stream(({match: 'css/**/*.css'}))); 
}); 

/* Creates the minified version */ 

gulp.task('css-minify', ['styles'], function() { 
    return gulp.src('scss/**/*.scss') 
     .pipe(sourcemaps.init()) 
      .pipe(sass({ 
       outputStyle: 'compact' // Options: nested, expanded, compact, compressed 
      }).on('error', sass.logError)) 
      .pipe(postcss([ 
       autoprefixer({ 
        browsers: [ 
         'last 4 Chrome versions', 
         'last 4 Firefox versions', 
         'last 4 Edge versions', 
         'last 2 Safari versions', 
         'ie >= 10', 
         '> 1.49%', 
         'not ie <= 9' 
        ], 
        cascade: false 
       }), 
      ])) 
      .pipe(cleanCSS({ 
       advanced: false, 
       aggressiveMerging: false 
      })) 
      .pipe(rename({suffix: '.min'})) 
     .pipe(sourcemaps.write('../maps')) 
     .pipe(gulp.dest('./css/')); 
}); 

gulp.task('browser-sync', function() { 
    browserSync.init({ 
     open: 'external', 
     proxy: "bmmedia.dev", 
     host: 'bmmedia.dev', 
     // port: 5000, 
     browser: "chrome", 
    }); 
}); 

gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() { 
    gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']); 
}); 

gulp.task('default', ['js-watch', 'css-minify']); 

공지 사항 내 watch 작업이 나는 문제가 here 지정 가졌다로 내가했던 가장 최근의 변화, 그리고 그것을 잘 작동하는 동안 나는 그러나 지금, this answer으로 해결 , 주입하는 것보다는 재 장전하는 것처럼 보입니다.

해결할 수있는 방법이 있습니까?

편집 :

난 그냥도 .scss 파일에 변화가 있었다마다 js-watch 실행 되었기 때문에 매번 다시로드 깨달았다, 그래서이 그것을 변경 :

gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() { 
    gulp.watch(['scss/**/*.scss'], ['css-minify']); 
    gulp.watch(['js/dev/**/*.js'], ['js-watch']); 
}); 

그러나 이제 .scss 파일이 변경되면 다시로드되거나 다시로드되지 않습니다. 나는 그것을 해결 한 생각

Answer 1

... I로 변경

내 watch 작업 :에

.pipe(browserSync.stream(({match: 'css/**/*.css'}))); 

:

gulp.task('watch', ['browser-sync'], function() { 
    gulp.watch(['scss/**/*.scss'], ['css-minify']); 
    gulp.watch(['js/dev/**/*.js'], ['js-watch']); 
}); 

그런 다음 내 styles 작업에서 내가이 줄을 변경 :

.pipe(browserSync.stream()); 

CSS 변경 사항을 찾지 못한 이유는 확실하지 않습니다. 이제는 제대로 작동하는 것 같습니다.

Answer 2

또한 컴파일 된 출력 파일을 시청할 수도 있습니다.

Dest/css/styles.css 
Dest/js/my.js 

sass/js 모듈에 대한 변경 사항은 최종 css/js 출력 파일에 반영됩니다. 브라우저 재로드는 css/js 컴파일이 완료되면 sass/js 번들 컴파일로 다시로드하지 않고 실행됩니다.

또한 Gulp-newer를 살펴보십시오. 최종 출력 파일 (dest/css/styles.css)이 src/sass/**. scss 파일을 기준으로 변경된 경우 작업 확인/트리거에 사용할 수 있습니다.

이것은 이미지 (이미지가 변경 될 때마다 수행해야하는 다른 검사)에도 추가 할 수있는 경우에만 매우 유용합니다 (각 빌드에서 축소 할 필요 없음).