gulpでブラウザをリフレッシュする方法

Question

iisにはアプリケーションがあります。これはangularjsとwebapi C＃2.0で作成されたアプリケーションです。保存するとすぐにブラウザを更新するタスクを作成したいと思いますjsファイル。

一気のバージョン：3.9.1

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

Answer 1

gulp-livereload

livereload chrome extensionまたはlivereload middlewareで使用するための軽量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

それが必要 ではありませんので、ガルプのための公式Browsersyncプラグインは、ありません！ requireモジュールを使用する場合は、APIを使用し、 をoptionsと設定してください。

新しいクールな子供は、ほとんどがすでにそれに移動しています。

ストリームはBrowsersyncでサポートされているので、あなたの作業中に 特定のポイントでリロードを呼び出すことができますし、すべてのブラウザが の変更が通知されます。あなたが のコンパイルを終えると、BrowsersyncはあなたのCSSを気にするだけなので、gulp.destの後に.stream()に電話してください。手動リロードの

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

Why Browsersync is better?

が、それはデスクトップと同時に モバイルデバイス間で動作します。コードの変更が更新され、 はすべてのブラウザとデバイスで のブラウザとデバイスにスクロール位置とフォーム入力を自動的に同期させます。