我刚开始使用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/