问

javascript - gulp配置监听无效？

贺bujak_491 发布于 2022-11-16 06:10

文件

如图，我配置了监听，主要监听src内的文件变动。但是只有根目录下的index.html被正确监听了，其他像sass、js什么的都没反应，那么gulpfile.js是否有不合理的地方？请指教，谢谢！！

gulpfile.js文件内容如下：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var reload      = browserSync.reload;

var Asset = {
    html: './src/html/*.html',
    js: './src/js/*.js',
    sass: './src/sass/*.scss',
    images: './src/images/*'
};
// 静态服务器 + 监听 scss/html 文件
gulp.task('server', function() {
    browserSync.init({
        server: "."
    });

});
// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src("./src/sass/*.scss")
        .pipe(sass())
        .pipe(prefix())
        .pipe(gulp.dest("./dist/"))
        .pipe(reload({stream: true}));
});
//监听
gulp.task('watch', function() {
  gulp.watch("Asset.html", reload);
  gulp.watch("Asset.js?1.2.1", reload);
  gulp.watch("Asset.sass", ['sass'], reload);
  gulp.watch("Asset.images", reload);
});
// 默认
gulp.task('default', ['sass','watch','server']);

2 个回答

var browserSync = require('browser-sync'); //浏览器刷新
gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: "dist/" //默认根目录
        },
        browser: "google chrome" //使用chrome打开
    })
});

gulp.watch('"Asset.html', browserSync.reload); //监听html，并刷新浏览器

2022-11-16 07:10 回答

柯韵亚

var Asset = {
    html: './src/html/**.html',
    js: './src/js/**.js',
    sass: './src/sass/**.scss',
    images: './src/images/**'
};
...
gulp.task('watch', function() {
  gulp.watch(Asset.html, reload);
  gulp.watch(Asset.js, reload);
  gulp.watch(Asset.sass, ['sass'], reload);
  gulp.watch(Asset.image", reload);
});

Asset.html之类引用不用带引号,PS:*和，貌似我更喜欢，没理由

2022-11-16 07:10 回答

IvyShao520

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签