Как сделать обновление в браузере с помощью gulp

У меня есть приложение в iis, это приложение сделано в angularjs и webapi C # 2.0, я хотел бы создать задачу, которая обновляет браузер, как только я сохраню любой JS-файл.

версия gulp: 3.9.1

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

1 ответов

глоток-livereload

легкий плагин gulp для livereload, который будет использоваться с расширение Chrome livereload или 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, потому что это не нужна! Ты просто 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 лучше?

он не ограничен одним устройством, он работает на рабочем столе и мобильные устройства одновременно. Он обновит изменения кода, синхронизировать позиции прокрутки и автоматически формировать входные данные по всем браузеры и устройства.

11