Question

我有一个gulp任务，我写的曾经完美地工作。有一天，我进来了，它停止了工作，即使我没有改变gulpfile。

我有一个BrowserSync任务，它将样式注入浏览器，一个编译所有sass文件的sass任务，以及一个在修改任何sass文件时运行sass任务的watch任务。

现在出现的问题是，当我保存任何我的sass文件时，它们被编译并注入到浏览器中，但似乎某些因素会导致注入时间出现问题，因为页面将完全加载没有样式，没有全部CSS完全加载的半风格，或完全正常的一切工作，所有随机的间隔。我可以在5秒内保存10次并且每次都得到相同的结果或者随机得到完全不同的结果，这使我相信注射时间有问题。

如果我检查页面，我可以在头部看到指向CSS文件的链接，我可以在新选项卡中打开该链接并完整地查看完整的CSS文件，而不会对该CSS文件或其文件有任何问题内容。

BrowserSync任务：

gulp.task('sync', function() {
    browserSync.init({
        open: true,
        proxy: {
            target: 'pariveda.local/'
        }
    });
});

Sass任务：

gulp.task('sass', function () {
    return gulp.src('./assets/sass/main.scss')
    .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError)) // .on('error', sass.logError) prevents gulp from crashing when saving a typo or syntax error
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./assets/sass'))
    .pipe(gulp.dest(localSettings.publishFolder + '/assets/sass/'))
    .pipe(browserSync.stream()); // causes injection of styles on save
});

观看任务：

gulp.task('watch', function() {
    gulp.watch('./assets/sass/**/*.scss', ['sass']);
    gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML']);
    gulp.watch('./assets/js/**/*.js', ['javascript']);
    gulp.watch(['./assets/vendors/js/*.js', '!./assets/vendors/js/vendors.min.js'], ['vendors']);
    gulp.watch('./Views/Renderings/**/*.cshtml', ['publishCshtml']);
});

默认任务：

gulp.task('default', ['sync', 'publishCshtml', 'vendors', 'javascript', 'sass', 'watch']);

这是我默认任务的输出：

$ gulp
[17:39:44] Using gulpfile ~\Documents\Sites\PVD\Pariveda.Web\gulpfile.js
[17:39:45] Starting 'sync'...
[17:39:45] Finished 'sync' after 17 ms
[17:39:45] Starting 'publishCshtml'...
[17:39:45] Starting 'vendors'...
[17:39:45] Starting 'javascript'...
[17:39:45] Starting 'sass'...
[17:39:45] Starting 'watch'...
[17:39:45] Finished 'watch' after 78 ms
[Browsersync] 1 file changed (main.css)
[17:39:49] Finished 'sass' after 4.87 s
[17:39:49] Finished 'vendors' after 4.89 s
[Browsersync] Proxying: http://pariveda.local
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.14.137:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.14.137:3001
 ---------------------------------------
[Browsersync] Reloading Browsers...
[Browsersync] 1 file changed (bundle.js)
[17:39:51] Finished 'javascript' after 6.49 s

在成功运行sass任务之前，强制页面重新加载的任务有问题吗？

BrowserSync没有正确注入样式

0 个答案: