更改.less文件时，Gulp 4浏览器同步不刷新
更改.less文件时，Gulp 4浏览器同步不刷新
提问于 2018-06-02 14:43:01
链接至Github存储库：
我有一个名为base.less的文件，其中所有的样式都是@import-ed。当我运行gulpfile (npm run dev)时，一切都在构建中，浏览器打开页面。但是，当我修改一个导入的样式表的内容时，browsersync只是在控制台File event [change] : dist/base.css中写入内容，什么也没有发生(甚至base.css实际上也没有改变)。请注意，如果我通过在其中编写一些样式来直接更改base.less，一切都会正常工作。
这是我的gulpfile.js。有没有人能看出其中的错误？
'use strict';
const gulp = require('gulp'),
del = require('del'),
autoprefixer = require('gulp-autoprefixer'),
less = require('gulp-less'),
cleanCSS = require('gulp-clean-css'),
gulpIf = require('gulp-if'),
sourceMaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create();
const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';
gulp.task('less', () => {
return gulp.src('src/assets/themes/base/base.less')
.pipe(gulpIf(isDevelopment, sourceMaps.init()))
.pipe(less())
.on('error', onLessError)
.pipe(autoprefixer({
browsers: [
'last 2 versions',
'safari 5',
'ie 10',
'ie 11'
],
cascade: true
}))
.pipe(cleanCSS())
.pipe(gulpIf(isDevelopment, sourceMaps.write()))
.pipe(gulp.dest('prod'));
});
gulp.task('images', () => {
return gulp.src('src/assets/themes/base/images/**/*.*', {base: 'src/assets/themes/base', since: gulp.lastRun('images')})
.pipe(gulp.dest('prod'));
});
gulp.task('index', () => {
return gulp.src('src/index.html', {since: gulp.lastRun('index')})
.pipe(gulp.dest('prod'));
});
gulp.task('clean', () => {
return del('prod');
});
gulp.task('build', gulp.series('clean', gulp.parallel('less', 'images', 'index')));
gulp.task('watch', () => {
gulp.watch('src/assets/themes/base/**/*.less', gulp.series('less'));
gulp.watch('src/assets/themes/base/images/**/*.*', gulp.series('images'));
gulp.watch('src/index.html', gulp.series('index'));
});
gulp.task('serve', function() {
browserSync.init({
server: 'prod'
});
browserSync.watch('prod/**/*.*').on('change', browserSync.reload);
});
gulp.task('dev', gulp.series('build', gulp.parallel('watch', 'serve')));
/***HELPERS FUNCTIONS***/
function onLessError(error) {
console.error(error.message);
this.emit('end');
}回答 1
Stack Overflow用户
发布于 2018-06-02 23:41:26
我不喜欢这种变通，因为对我来说，它告诉我我们的一个插件不能正常工作(浏览器同步)，所以我们用那个坏掉的插件来纠正它。我可能会尝试使用browserify。
gulp.task('serve', function() {
browserSync.init({
files: [
{
match: ['src/assets/themes/base/**/*.less'],
fn: function (event, file) {
this.reload()
}
}
],
server: 'prod'
});
browserSync.watch('prod/**/*.*').on('change', browserSync.reload);
});编辑-这也可能是一个目录问题，其中src与watch dir不同。对于不同的文件夹，src/assets/themes/base/**/*.less'应为src/assets/themes/**/*.less'或src/assets/themes/base/*.less'。
编辑2-如果将任何其他文件添加到gulp命令中，则gulp.watch('src/assets/themes/base/*.less', gulp.series('less'));会在任何其他文件发生更改时重新加载base.less。:D
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50654252
复制相关文章
相似问题