我刚刚开始使用 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 网站上列出的方法。但这对我不起作用。当我更改 JS 文件时,我的脚本确实会更新,但不会重新加载浏览器!