5

我正在尝试为 .NET MVC 应用程序设置一个 gulp 浏览器同步构建系统，除了在进行更改时使用浏览器同步进行实时重新加载之外，一切正常。这是我第一次尝试，所以我可能会做一些简单的错误。这是我的 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 不会。我必须手动刷新

4

4 回答 4

3

试试这个：

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 任务，但如果您需要更多示例，您可以导航到其他任务！）

于 2015-04-20T14:20:38.067 回答
1

这是我的项目中有效的方法

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，请确保实时重新加载插件可以访问设置中的文件 URL，如果您的页面在 https 下运行，请遵循加载不安全内容说明。

于 2015-04-20T14:26:04.013 回答
0

可以在你的 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/

于 2015-04-20T14:21:10.093 回答
0

您可以使用 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();
});
于 2016-02-23T18:28:57.910 回答