2016-11-08 42 views
0

之后重新加载似乎有什么我想念 - 我只是试图让这个项目的CSS注入工作。浏览器同步重新加载注入工程,但在

服务器代理工作 文件观察家也 注射作品, 但页面重新加载总是半秒后...

IM在MAC OSX 10.11.6(15G1108) 节点V4.1.1

这里是我的gulpfile:

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

var plumber = require('gulp-plumber'); 
var notify = require("gulp-notify"); 

var src = { 
scss: 'assets/scss/**', 
css: 'assets/css/', 
html: 'app/*.html' 
}; 

gulp.task('serve', ['sass'], function() { 

browserSync.init({ 
    proxy: "intouch.local", 
    open: false, 
    reloadOnRestart: false, 
    injectChanges: true, 
}); 

gulp.watch(src.scss, ['sass']); 
}); 

gulp.task('sass', function() { 

var onError = function(err) { 
     notify.onError({ 
        title: "Gulp", 
        subtitle: "Failure!", 
        message: "Error: <%= error.message %>", 
        sound: "Beep" 
       })(err); 

     this.emit('end'); 
    }; 


return gulp.src(src.scss) 
    .pipe(plumber({errorHandler: onError})) 
    .pipe(sass()) 
    .pipe(gulp.dest(src.css)) 
    // NOTE: i've tried with all of these lines, all do the same... 
    // .pipe(reload({stream: true})) 
    // .pipe(browserSync.stream()) 
    .pipe(browserSync.reload({ 
      stream: true 
     })) 
    .pipe(notify({ 
     title: 'Gulp', 
     subtitle: 'success', 
     message: 'Sass task', 
     sound: "Pop" 
    })); 
}); 

gulp.task('default', ['serve']); 

回答

2

调整要编译只匹配.scss的SASS文件中的glob(或.sass)文件:

例如在您的代码示例中将assets/scss/**更改为assets/scss/**/*.scss

广泛的glob可能导致意外的文件(通常为源映射)传递到管道和Browsersync的默认行为,当遇到无法流式传输的修改后的文件将重新加载页面,因此您可以成功注入CSS然后重新加载一些你可能没有想到/不关心的文件。

+1

除了源地图,其他潜在的元凶可能是目录和隐藏文件(例如'.gitignore')。在管道到SASS之前使用更具体的glob或过滤文件修复了迄今为止遇到的所有情况。 – thewildandy

+0

所以如果我的scss文件夹包含一个带有“partials”的子文件夹,并且在scss文件夹的根目录下有一个主scss文件,这是否是正确的方法来观察这些文件:'gulp.watch(“scss/*。scss”, [ 'SASS']); gulp.watch(“scss/*/*。scss”,['sass']); – ulumi

+0

@ulumi个人我会使用'scss/**/*。scss'。双星部分将允许您使用任何您想要的子目录,并且'* .scss'部分将确保没有任何意外通过该过滤器。 – thewildandy

相关问题