Question

我已经在gulpfile.js中尝试了几个不同的东西，以便在Gulp中使用HTML自动重新加载与BrowserSync（不是LiveReload）一起使用，但没有一个有效。我认为这最后一次尝试会做到这一点，但它也不起作用。我错过了什么？

这是我的整个gulpfile.js：

// -------------------------------------------------------------------------
// GET THINGS SET UP
// -------------------------------------------------------------------------

// Include Gulp
var gulp                    = require('gulp');

// CSS plugins
var sass                    = require('gulp-sass');
var combineMediaQueries     = require('gulp-combine-media-queries');
var autoprefixer            = require('gulp-autoprefixer');
var cssmin                  = require('gulp-cssmin');

// JS plugins
var concat                  = require('gulp-concat');
var uglify                  = require('gulp-uglify');

// Image plugins
var imagemin                = require('gulp-imagemin');
var svgmin                  = require('gulp-svgmin');

// General plugins
var browserSync             = require('browser-sync');
var reload                  = browserSync.reload;
var notify                  = require('gulp-notify');

// -------------------------------------------------------------------------
// TASKS
// -------------------------------------------------------------------------

// CSS tasks
gulp.task('css', function() {
    return gulp.src('src/scss/**/*')
        // Compile Sass
        .pipe(sass({ style: 'compressed', noCache: true }))
        // Combine media queries
        .pipe(combineMediaQueries())
        // parse CSS and add vendor-prefixed CSS properties
        .pipe(autoprefixer())
        // Minify CSS
        .pipe(cssmin())
        // Where to store the finalized CSS
        .pipe(gulp.dest('build/css'))
        // Notify us that the task was completed
        .pipe(notify({ message: 'CSS task complete' }));
});

// JS tasks
gulp.task('js', function() {
    return gulp.src('src/js/**/*')
        // Concatenate all JS files into one
        .pipe(concat('production.js'))
        // Minify JS
        .pipe(uglify())
        // Where to store the finalized JS
        .pipe(gulp.dest('build/js'))
        // Notify us that the task was completed
        .pipe(notify({ message: 'Javascript task complete' }));
});

// Image tasks
gulp.task('images', function() {
    return gulp.src('src/images/raster/*')
        // Minify the images
        .pipe(imagemin())
        // Where to store the finalized images
        .pipe(gulp.dest('build/images'))
        // Notify us that the task was completed
        .pipe(notify({ message: 'Image task complete' }));
});

// SVG tasks
gulp.task('svgs', function() {
    return gulp.src('src/images/vector/*')
        // Minify the SVG's
        .pipe(svgmin())
        // Where to store the finalized SVG's
        .pipe(gulp.dest('build/images'))
        // Notify us that the task was completed
        .pipe(notify({ message: 'SVG task complete' }));
});

// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
    // Watch HTML files
    gulp.watch('build/*.html', reload);
    // Watch Sass files
    gulp.watch('src/scss/**/*', ['css']);
    // Watch JS files
    gulp.watch('src/js/**/*', ['js']);
    // Watch image files
    gulp.watch('src/images/raster/*', ['images']);
    // Watch SVG files
    gulp.watch('src/images/vector/*', ['svgs']);
});

gulp.task('browser-sync', function() {  
    browserSync.init(['build/css/*', 'build/js/*'], {
        server: {
            baseDir: "build"
        }
    });
});

// Default task
gulp.task('default', ['css', 'js', 'images', 'svgs', 'watch', 'browser-sync']);

Answer 1

我遇到了同样的问题。

问题是我的jade（html）任务没有在browsersync任务之前完成。所以我让browsersync任务等待所有必须先完成的任务

显然这就是为什么Browser-Sync不知道该文件，这解决了它：

gulp.task('browsersync', ['jade', 'stylus', 'browserify'], function() {
  browserSync.init(['./public/**/**.**'], {
    port: 8080,
    server: {
      baseDir: "./public"
    }
  });
});

Answer 2

gulp.task('browser-sync', function() {  
  browserSync.init(['./build/css/**.*', './build/js/**.*'], {
    server: {
      baseDir: "./build"
    }
  });
});

上面代码中的这些细微变化应该可以解决您的问题...

使用Gulp中的BrowserSync重新加载HTML

2 个答案: