Настройка Browser Sync Gulp не работает с .NET MVC

Я пытаюсь настроить систему сборки gulp с синхронизацией браузера для приложения .NET MVC, все работает, кроме перезагрузки в реальном времени с синхронизацией браузера при каждом изменении. Это моя первая попытка, поэтому я могу сделать что-то простое неправильно. Вот мой gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    watch = require('gulp-watch'),
    livereload = require('gulp-livereload'),
    browserSync = require('browser-sync'),
    concat = require('gulp-concat');

//minify js
gulp.task('minifyJS', function () {
    gulp.src('Scripts/**/*.js')
        .pipe(concat('app.js'))
        .pipe(gulp.dest('Scripts'))
});

gulp.task('minifyCSS', function () {
    gulp.src('Content/**/*.css')
        .pipe(concat('app.css'))
        .pipe(gulp.dest('Content'))
});

//browsersync
gulp.task('browserSync', function () {
    var files = [
       'Scripts/**/*.js',
       'Content/**/*.css',
       'Views/**/*.cshtml'
    ];

    browserSync.init(files, {

        proxy: "http://localhost:55783/"
    });
});

//default task wraps the two
gulp.task('default', ['minifyJS', 'minifyCSS', 'watch', 'browserSync']);

//watch tasks
gulp.task('watch', function () {
    var jsWatcher = gulp.watch('Scripts/**/*.js', ['minifyJS']);
    var cssWatcher = gulp.watch('Content/**/*.css', ['minifyCSS']);

    jsWatcher.on('change', function (event) {
        console.log('Event type: ' + event.type); // added, changed, or deleted
        console.log('Event path: ' + event.path); // The path of the modified file
    });

    cssWatcher.on('change', function (event) {
        console.log('Event type: ' + event.type); // added, changed, or deleted
        console.log('Event path: ' + event.path); // The path of the modified file
    });
});

когда я запускаю gulp watch работает просто отлично, так как строки записываются в консоль, просто нет перезагрузки в реальном времени. Я испортил довольно много сообщений в блоге безрезультатно, есть идеи?

РЕДАКТИРОВАТЬ: Browser-Sync запускает сайт с прокси-сервера, всякий раз, когда я изменяю файл CSS или JS в перечисленных каталогах, gulp watch обнаруживает его, а Browser-Sync — нет. мне приходится вручную обновлять


javascript gulp browser-sync
person user4612487    schedule 20.04.2015    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Попробуй это:

gulp.task('watch', function () {
    function reportChange(event){
        console.log('Event type: ' + event.type); // added, changed, or deleted
        console.log('Event path: ' + event.path); // The path of the modified file
    }

    gulp.watch('Content/**/*.css', ['minifyCSS', browserSync.reload]).on('change', reportChange);
    gulp.watch('Scripts/**/*.js', ['minifyJS', browserSync.reload]).on('change', reportChange);
});

Если вам нужен пример, вы можете увидеть его в этом скелетном репозитории приложений: https://github.com/aurelia/skeleton-navigation/blob/master/build/tasks/watch.js

(Я связал задачу Watch, но вы можете перейти к другим задачам, если вам нужно больше примеров!)

person Felipe Skinner    schedule 20.04.2015
comment
также я бы изменил вашу задачу по умолчанию, чтобы удалить задачу browserSync и добавить ее в качестве зависимости к задаче просмотра, поскольку это гарантировало бы, что browserSync будет запущен до запуска задачи просмотра! - person Felipe Skinner; 20.04.2015
comment
Спасибо большое! Работает отлично - person user4612487; 20.04.2015

arrow_upward
1
arrow_downward

Вот что работает в моем проекте

var sourcemaps = require('gulp-sourcemaps');

var viewDir = './src/';
gulp.task('cshtml', function(){
  return gulp.src(viewDir)
    .pipe(livereload({quiet: true}));
});


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

Для Chrome убедитесь, что плагин live reload имеет доступ к URL-адресам файлов в настройках, и если ваша страница работает по https, следуйте инструкциям по загрузке инструкции по работе с небезопасным содержимым.

person DShook    schedule 20.04.2015

arrow_upward
0
arrow_downward

Можно попробовать этот фрагмент кода в вашем gulp-файле:

gulp.task('browserSync', function() {

    browserSync.init({
        proxy: "http://localhost:55783/"
    });

    gulp.watch("app/*.html").on('change', reload); // all your files go here
});

Все об этом плагине gulp можно прочитать по адресу:
http://www.browsersync.io/docs/gulp/

person Adi    schedule 20.04.2015
comment
Это дало мне ошибку о том, что перезагрузка не является функцией, хотя другой ответ работал достаточно хорошо. - person user4612487; 20.04.2015

arrow_upward
0
arrow_downward

Вы можете вручную запустить перезагрузку синхронизации браузера, используя часы в Gulp! Вот пример кода, для которого определена задача.

gulp.task('watch', [], function () {
    gulp.watch([
        paths.app + '/**/*.html',
        paths.assets + '/**/*.less',
        paths.app + '/**/*.js'
    ], ['browsersync-reload']);
});

//Task that triggers the reload
gulp.task('browsersync-reload', function () {
    browserSync.reload();
});
person Peter Finn    schedule 23.02.2016