gulp-livereload

Question

我有一个应用程序在iis中，它是一个用angularjs和webapi C＃2.0制作的应用程序，我想创建一个任务，一旦我保存任何js文件就更新浏览器。

gulp版本：3.9.1

gulp.task('livereload', function () {
    gulp.watch(config.files.js);
});

Answer 1

gulp-livereload

用于livereload的轻量级gulp插件 livereload chrome extension或livereload middleware。

设置简单：

require

Browsersync

Gulp没有正式的Browsersync插件，因为它不是需要！您只需.stream()模块，使用API并进行配置它与options。

这个新酷的孩子，大多数已经搬到了它。

Browsersync支持Streams，因此您可以调用reload at 您的任务中的特定点将被告知所有浏览器变化。因为Browsersync只关心你的CSS 完成编译 - 请务必在gulp.dest之后致电var gulp = require('gulp'), browserSync = require('browser-sync').create(), sass = require('gulp-sass'); // Static Server + watching scss/html files gulp.task('serve', ['sass'], function() { browserSync.init({ server: "./app" // or // proxy: 'yourserver.dev' }); gulp.watch("app/scss/*.scss", ['sass']); gulp.watch("app/*.html").on('change', browserSync.reload); }); // Compile sass into CSS & auto-inject into browsers gulp.task('sass', function() { return gulp.src("app/scss/*.scss") .pipe(sass()) .pipe(gulp.dest("app/css")) .pipe(browserSync.stream()); }); gulp.task('default', ['serve']);。

// ...
var reload = browserSync.reload;

// Save a reference to the `reload` method

// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({/* ... */});

    gulp.watch("*.html").on("change", reload);
});

手动重新加载：

cost text, quantity text, total text

Why Browsersync is better?

它不受限于单个设备，它可以跨桌面和移动设备同时进行。它会更新代码更改，同步滚动位置并自动形成输入浏览器和设备。

如何使用gulp在浏览器中进行刷新

1 个答案:

gulp-livereload

Browsersync