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

问题描述

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

gulp 版本:3.9.1

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

解决方案

gulp-livereload

<块引用>

用于 livereload 的轻量级 gulp 插件，可与livereload chrome 扩展 或 livereload 中间件.

设置简单:

var gulp = require('gulp'),少=需要('gulp-less')，livereload = require('gulp-livereload');gulp.task('less', function() {gulp.src('less/*.less').pipe(少()).pipe(gulp.dest('dist')).pipe(livereload());});gulp.task('watch', function() {livereload.listen();gulp.watch('less/*.less', ['less']);});

浏览器同步

<块引用>

Gulp 没有官方的 Browsersync 插件，因为它不是需要！您只需 require 模块，利用 API 并配置它带有 options.

新来的酷小孩，大部分人都已经搬过来了.

<块引用>

Browsersync 支持流，因此您可以在以下位置调用 reload任务期间的特定点，所有浏览器都将被告知变化.因为 Browsersync 只关心你的 CSS完成编译 - 确保在 gulp.dest 之后调用 .stream().

var gulp = require('gulp'),browserSync = require('browser-sync').create(),sass = require('gulp-sass');//静态服务器 + 看 scss/html 文件gulp.task('serve', ['sass'], function() {browserSync.init({服务器:./app"//或者//代理:'yourserver.dev'});gulp.watch("app/scss/*.scss", ['sass']);gulp.watch("app/*.html").on('change', browserSync.reload);});//将 sass 编译成 CSS &自动注入浏览器gulp.task('sass', function() {返回 gulp.src("app/scss/*.scss").pipe(sass()).pipe(gulp.dest("app/css")).pipe(browserSync.stream());});gulp.task('default', ['serve']);

对于手动重新加载:

//...var reload = browserSync.reload;//保存对 `reload` 方法的引用//观察 scss 和 html 文件，对每个文件做不同的事情.gulp.task('服务', function () {//从这个项目的根目录提供文件browserSync.init({/* ... */});gulp.watch("*.html").on("改变", 重新加载);});

为什么 Browsersync 更好?

<块引用>

它不限于单个设备，它可以跨桌面和同时移动设备.它将更新代码更改，自动同步滚动位置和表单输入浏览器和设备.

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.

Version of gulp: 3.9.1

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

解决方案

gulp-livereload

A lightweight gulp plugin for livereload to be used with the livereload chrome extension or a livereload middleware.

Simple to setup:

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

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.

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']);

For a manual reload:

// ...
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);
});

Why Browsersync is better?

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屋！