我刚刚开始使用 Gulp。我的 gulpfile.js
如下:
// require gulp
var gulp = require('gulp');
// include gulp plugins
var concat = require('gulp-concat');
var sass = require('gulp-ruby-sass');
var brsync = require('browser-sync').create();
// make one js file
gulp.task('scripts', function() {
return gulp.src('src/app/js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('build/js/'));
});
// turn scripts into one file and reload browser
gulp.task('scripts-watch', ['scripts'], brsync.reload());
// convert sass to css
gulp.task('sass', function() {
return sass('src/app/scss/main.scss', {style: 'expanded'})
.on('error', function(err) {
console.error('something went wrong with sass processing!', err.message);
})
.pipe(gulp.dest('build/css'))
.pipe(brsync.stream());
});
// copy over index file to build directory
gulp.task('html', function() {
return gulp.src('src/app/index.html')
.pipe(gulp.dest('build/'));
});
// reload browser when html in src changes
gulp.task('html-watch', ['html'], brsync.reload());
gulp.task('serve',['scripts', 'sass', 'html'], function() {
brsync.init({
server: "./build"
});
gulp.watch('src/app/js/*.js', ['scripts-watch']);
gulp.watch('src/app/index.html', ['html-watch']);
gulp.watch('src/app/scss/*.scss', ['sass']);
});
gulp.task('default', ['serve']);
我只是遵循 BrowserSync 网站 here 上概述的方法。但这对我不起作用。当我更改 JS 文件时,我的脚本确实会更新,但浏览器不会重新加载!
最佳答案
尝试使用代理:
gulp.task('serve',['scripts', 'sass', 'html'], function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
files: ['src/app/**/*'],
browser: "google chrome",
port: 7000
});
gulp.watch('src/app/js/*.js', ['scripts-watch']);
gulp.watch('src/app/index.html', ['html-watch']);
gulp.watch('src/app/scss/*.scss', ['sass']);
});
gulp.task('default', ['serve']);
我还使用 var browserSync = require('browser-sync');
而不是 var browserSync = require('browser-sync').create();
.
关于javascript - BrowserSync 和 Gulp。无法重新加载以适用于 JS/HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30683249/