节点 + Gulp - 必须保存文件两次才能在浏览器中看到更改
Node + Gulp - Have to save files two times to see changes in browser
你能指出正确的方向来解决这个不一致吗?
我正在使用 Node、gulp 和 gulp 的插件列表 在一个新项目中工作。
每次我执行 Ctrl + S 时,浏览器都会重新加载,但我没有看到应用的更改,因此我需要再次按 Ctrl + S 才能看到它们。第二次浏览器重新加载并显示更改。
我的源目录下的 我的任何 html、scss 或 js 文件 都会发生这种情况。
我正在使用 Visual Studio 代码开发 Windows 10,除此之外一切正常。
我的gulpfile.js内容如下:
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
gulp.task('styles', function(){
var injectFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});
function transformFilepath(filepath) {
return '@import "' + filepath + '";';
}
var injectFilesOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
var injectGlobalOptions = {
transform: transformFilepath,
starttag: '// inject:global',
endtag: '// endinject',
addRootSlash: false
};
return gulp.src('src/styles/main.scss')
.pipe(plumber())
.pipe(wiredep())
.pipe(inject(injectGlobalFiles, injectGlobalOptions))
.pipe(inject(injectFiles, injectFilesOptions))
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
gulp.task('browser-sync', function() {
browserSync.init(["styles/*.css", "js/*.js","index.html"], {
server: {
baseDir: "dist"
}
});
});
gulp.task('html', ['styles'], function(){
var injectFiles = gulp.src('src/styles/*.scss', {read: false});
var injectOptions = {
addRootSlash: false,
ignorePath: ['src', 'dist']
};
return gulp.src('src/index.html')
.pipe(plumber())
.pipe(inject(injectFiles, injectOptions))
.pipe(gulp.dest('dist'));
});
gulp.task('imagemin', function() {
gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
});
gulp.task('uglify', function() {
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('sass', function() {
gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);
任何帮助将不胜感激。
谢谢,祝你玩得开心。
试试这些改变:
var browserSync = require('browser-sync').create();
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload({ stream:true }));
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload({ stream:true }));
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload());
});
如果这没有帮助,我会像这样将重新加载调用移动到每个任务的末尾:
.pipe(browserSync.reload({ stream:true }));
希望这对您有所帮助。
[编辑]
改为:
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']);
gulp.watch('src/styles/*.scss', ['sass']);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('imagemin', function() {
return gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
.pipe(browserSync.reload({ stream:true }));
});
gulp.task('uglify', function() {
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
.pipe(browserSync.reload({ stream:true }));
});
gulp.task('sass', function() {
return gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
.pipe(browserSync.reload({ stream:true }));
});
gulpfile 的其他部分不会改变。除了进行之前建议的更改:
var browserSync = require('browser-sync').create();
你能指出正确的方向来解决这个不一致吗?
我正在使用 Node、gulp 和 gulp 的插件列表 在一个新项目中工作。 每次我执行 Ctrl + S 时,浏览器都会重新加载,但我没有看到应用的更改,因此我需要再次按 Ctrl + S 才能看到它们。第二次浏览器重新加载并显示更改。
我的源目录下的 我的任何 html、scss 或 js 文件 都会发生这种情况。
我正在使用 Visual Studio 代码开发 Windows 10,除此之外一切正常。
我的gulpfile.js内容如下:
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
gulp.task('styles', function(){
var injectFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});
function transformFilepath(filepath) {
return '@import "' + filepath + '";';
}
var injectFilesOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
var injectGlobalOptions = {
transform: transformFilepath,
starttag: '// inject:global',
endtag: '// endinject',
addRootSlash: false
};
return gulp.src('src/styles/main.scss')
.pipe(plumber())
.pipe(wiredep())
.pipe(inject(injectGlobalFiles, injectGlobalOptions))
.pipe(inject(injectFiles, injectFilesOptions))
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
gulp.task('browser-sync', function() {
browserSync.init(["styles/*.css", "js/*.js","index.html"], {
server: {
baseDir: "dist"
}
});
});
gulp.task('html', ['styles'], function(){
var injectFiles = gulp.src('src/styles/*.scss', {read: false});
var injectOptions = {
addRootSlash: false,
ignorePath: ['src', 'dist']
};
return gulp.src('src/index.html')
.pipe(plumber())
.pipe(inject(injectFiles, injectOptions))
.pipe(gulp.dest('dist'));
});
gulp.task('imagemin', function() {
gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
});
gulp.task('uglify', function() {
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('sass', function() {
gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);
任何帮助将不胜感激。
谢谢,祝你玩得开心。
试试这些改变:
var browserSync = require('browser-sync').create();
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload({ stream:true }));
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload({ stream:true }));
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload());
});
如果这没有帮助,我会像这样将重新加载调用移动到每个任务的末尾:
.pipe(browserSync.reload({ stream:true }));
希望这对您有所帮助。
[编辑]
改为:
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']);
gulp.watch('src/styles/*.scss', ['sass']);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('imagemin', function() {
return gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
.pipe(browserSync.reload({ stream:true }));
});
gulp.task('uglify', function() {
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
.pipe(browserSync.reload({ stream:true }));
});
gulp.task('sass', function() {
return gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
.pipe(browserSync.reload({ stream:true }));
});
gulpfile 的其他部分不会改变。除了进行之前建议的更改:
var browserSync = require('browser-sync').create();