멍청한 브라우저 동기화가 SCSS와 작동하지 않습니다.

Question

browsersync로 내 꿀꺽 꿀꺽 마시 설정에 SCSS 파일의 변경 사항을 감지하는 데 문제가있는 것 같습니다. 재 장전 및 감지 기능이있는 SLIM에서 완벽하게 작동합니다. 꿀꺽 꿀꺽 마시는 데는 오류가 없습니다. 유일한 문제는 browsersync가 SCSS 파일의 변경 사항을 감지하지 못하고 변경 사항을 다시로드하거나 삽입하는 데 실패했기 때문입니다.

var gulp = require('gulp'), 
 
    sass = require('gulp-ruby-sass'), 
 
    slim = require('gulp-slim'), 
 
    autoprefix = require('gulp-autoprefixer'), 
 
    notify = require('gulp-notify'), 
 
    bower = require('gulp-bower'), 
 
    image = require('gulp-image'), 
 
    concat = require('gulp-concat'), 
 
    uglify = require('gulp-uglify'), 
 
    rename = require('gulp-rename'), 
 
    browserSync = require('browser-sync').create(); 
 

 
var config = { 
 
    sassPath: './source/sass', 
 
    slimPath: './source/slim', 
 
    bowerDir: './bower_components', 
 
    jsPath: './source/js' 
 
} 
 

 
gulp.task('bower', function() { 
 
    return bower() 
 
     .pipe(gulp.dest(config.bowerDir)) 
 
}); 
 

 
gulp.task('js', function() { 
 
    return gulp.src('./source/js/**/*.js') 
 
     .pipe(concat('script.js')) 
 
     .pipe(gulp.dest('./dist/js')); 
 
}); 
 

 
gulp.task('icons', function() { 
 
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*') 
 
     .pipe(gulp.dest('./dist/fonts')); 
 
}); 
 

 
gulp.task('image', function() { 
 
    gulp.src('./source/images/*') 
 
     .pipe(image()) 
 
     .pipe(gulp.dest('./dist/images')); 
 
}); 
 

 
gulp.task('css', function() { 
 
    return sass('./source/scss/**/*.scss', { 
 
      style: 'compressed', 
 
      loadPath: [ 
 
       './source/scss', 
 
       config.bowerDir + '/bootstrap/scss', 
 
       config.bowerDir + '/font-awesome/scss', 
 
      ] 
 
    }).on("error", notify.onError(function (error) { 
 
      return "Error: " + error.message; 
 
      })) 
 
     .pipe(gulp.dest('./dist/css')) 
 
     .pipe(browserSync.stream()); 
 
}); 
 

 
gulp.task('html', function() { 
 
    gulp.src('./source/slim/**/*.slim') 
 
     .pipe(slim({ 
 
     pretty: true 
 
     })) 
 
     .pipe(gulp.dest('./dist/')); 
 
}); 
 

 
gulp.task('serve', ['css', 'html', 'js'], function() { 
 
    browserSync.init({ 
 
    injectChanges: true, 
 
    server: "./dist" 
 
    }); 
 
    gulp.watch(config.sassPath + '/**/*.scss', ['css']); 
 
    gulp.watch(config.slimPath + '/**/*.slim', ['html']).on('change', browserSync.reload);; 
 
}); 
 

 

 

 
gulp.task('default', ['bower','js', 'icons', 'css', 'html', 'image', 'serve']); 
 
gulp.task('build',['bower', 'js', 'icons', 'css', 'html', 'image']);

Answer 1

이 당신이 찾고있는 대답하지만 난 browserSync.stream()이 지속적으로 떨어져 발사하지 사용하여 유사한 문제로 실행하기 때문에 내가 사용하고 그 주변의 일을하지 않을 수 있습니다.

'use strict'; 

var gulp  = require('gulp'), 
    browserSync = require('browser-sync').create(); 

gulp.task('serve',function(){ 
    browserSync.init({ 
     server: { 
      baseDir: './dev/' 
     }, 
     files: ['./dev/**/*.html', 
       './dev/css/**/*.css', 
       './dev/js/**/*.js', 
       './dev/img/**/*.*'], 
     notify: false 
    }); 
}); 

당신이 볼 수 있듯이,이 browserSyncs에게 제공 작업을 쉽게 추상화하여 자신의 장점을 가지고 다른 프로젝트에 들어갔습니다 할 수있는 전체 빌드 프로세스를 통해 배관 반대로 자신의 시계 작업을 사용합니다.

희망이 도움이됩니다.