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

Question

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

gulp版本:3.9.1

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

Answer 1

一饮而尽,livereload

用于livereload的轻量级gulp插件,可与 livereload chrome扩展或livereload中间件一起使用.

设置简单:

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('less/*.less', ['less']);
});

Browsersync

Gulp没有正式的Browsersync插件,因为它不需要!您只需require使用模块,使用API并使用选项对其进行配置.

新的酷孩子,大多数已经转移到它.

Browsersync支持流,因此您可以在任务期间的特定点调用重新加载,并且将通知所有浏览器更改.因为Browsersync在完成编译时只关心你的CSS - 请确保你.stream()之后打电话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);
});

为什么Browsersync更好？

它不受单个设备的限制,它可以同时在桌面和移动设备上运行.它将更新代码更改,同步滚动位置并在所有浏览器和设备上自动形成输入.