Question

HTML和Sass / CSS文件会重新加载，但JavaScript并不是C 文件夹目标是否正确。这就是我所能说的全部。

var gulp        = require('gulp'),
    sass        = require('gulp-sass'),
    browserSync = require('browser-sync'),
    concat      = require('gulp-concat'),
    uglify      = require('gulp-uglify');

gulp.task('sass', function() {
    return gulp.src('app/sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('scripts', function() {
    return gulp.src([
        'app/libs/jquery/dist/jquery.min.js',
        'app/libs/slick-carousel/slick/slick.min.js',
        'app/js/common.js'
    ])
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/js'))
});

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: 'app'
        }
    });
});

gulp.task('watch', ['browser-sync', 'sass', 'scripts'], function() {
    gulp.watch('app/sass/*.sass', [sass])    
    gulp.watch('app/js/*.js', browserSync.reload)
    gulp.watch('app/index.html', browserSync.reload)
});

Answer 1

您的监视任务仅触发“脚本”任务一次。但此后看了.js文件，但是'脚本'没有运行，所以虽然你做了一个browserSync.reload'脚本'不是先运行所以重新加载只是重新加载你的main.js文件的旧版本。改为：

gulp.task('watch', ['browser-sync', 'sass', 'scripts'], function() {
    gulp.watch('app/sass/*.sass', ['sass'])    
    gulp.watch('app/js/*.js', ['scripts'])
    gulp.watch('app/index.html', browserSync.reload)
});

并添加行

.pipe(browserSync.reload({stream: true}))

到'脚本'任务结束时（就像'sass'任务结束一样。

JavaScript文件不会在浏览器同步中重新加载

1 个答案: