如何使用gulp在浏览器中进行刷新 [英] How to make a refresh in browser with gulp

问题描述

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

I have an app is in iis, it is an app made in angularjs and webapi C # 2.0, I would like to create a task that updates the browser as soon as I save any js file.

gulp版本：3.9.1

Version of gulp: 3.9.1

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

推荐答案

gulp-livereload

gulp-livereload

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

设置简单：

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

Browsersync

Gulp没有官方的Browsersync插件，因为它不需要
！您只需 require 该模块，使用 API 并使用选项配置
。

There's no official Browsersync plugin for Gulp, because it's not needed! You simply require the module, utilise the API and configure it with options.

新酷的孩子，大多数已经转移到它。

The new cool kid, most have already moved to it.

支持流在Browsersync中，您可以在任务期间以
特定点调用重新加载，并且将通知所有浏览器
更改。因为当
完成编译时，Browsersync只关心你的CSS - 确保在 gulp.dest .stream c $ c>。

Streams are supported in Browsersync, so you can call reload at specific points during your tasks and all browsers will be informed of the changes. Because Browsersync only cares about your CSS when it's finished compiling - make sure you call .stream() after 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更好？

它不限于单个设备，它适用于桌面和
移动设备。它将更新代码更改，
在所有
浏览器和设备上自动同步滚动位置和表单输入。

It is not constrained to a single device, it works across desktop and mobile devices at the same time. It will update code changes, synchronize scroll positions and form inputs automatically across all browsers and devices.

这篇关于如何使用gulp在浏览器中进行刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！