一切正常,但LiveReload没有注意更改,因此它不会自动重新加载页面。
我做错了什么?
这是我的Gulp文件:
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
pug = require('gulp-pug'),
htmlclean = require('gulp-htmlclean'),
concat = require('gulp-concat'),
deporder = require('gulp-deporder'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
};
// image processing
gulp.task('images', function () {
var out = folder.build + 'images/';
return gulp.src(folder.src + 'images/**/*')
.pipe(newer(out))
.pipe(imagemin({
optimizationLevel: 5
}))
.pipe(gulp.dest(out));
});
// Pug processing
gulp.task('pug', function buildHTML() {
var out = folder.build
return gulp.src(folder.src + 'views/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(out))
});
// HTML processing
gulp.task('html', ['images'], function () {
var
out = folder.build + 'html/',
page = gulp.src(folder.src + 'html/**/*')
.pipe(newer(out));
// minify production code
if (!devBuild) {
page = page.pipe(htmlclean());
}
return page.pipe(gulp.dest(out));
});
// JavaScript processing
gulp.task('js', function () {
var jsbuild = gulp.src(folder.src + 'js/**/*')
.pipe(deporder())
.pipe(concat('main.js'));
if (!devBuild) {
jsbuild = jsbuild
.pipe(stripdebug())
.pipe(uglify());
}
return jsbuild.pipe(gulp.dest(folder.build + 'js/'));
});
// CSS processing
gulp.task('css', ['images'], function () {
var postCssOpts = [
assets({
loadPaths: ['images/']
}),
autoprefixer({
browsers: ['last 2 versions', '> 2%']
}),
mqpacker
];
if (!devBuild) {
postCssOpts.push(cssnano);
}
return gulp.src(folder.src + 'scss/styles.scss')
.pipe(sass({
outputStyle: 'nested',
imagePath: 'images/',
precision: 3,
errLogToConsole: true
}))
.pipe(postcss(postCssOpts))
.pipe(gulp.dest(folder.build + 'css/'));
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: folder.build
},
port: 3000
});
});
// run all tasks
gulp.task('run', ['pug', 'html', 'css', 'js']);
// watch for changes
gulp.task('watch', ['browserSync'], function () {
// image changes
gulp.watch(folder.src + 'images/**/*', ['images']);
// pug changes
gulp.watch(folder.src + 'views/**/*', ['pug'], browserSync.reload);
// html changes
gulp.watch(folder.src + 'html/**/*', ['html'], browserSync.reload);
// javascript changes
gulp.watch(folder.src + 'js/**/*', ['js'], browserSync.reload);
// css changes
gulp.watch(folder.src + 'scss/**/*', ['css'], browserSync.reload);
});
// default task
gulp.task('default', ['run', 'watch']);
答案 0 :(得分:0)
我们工作watch
gulp配置的示例如下:
var watch = require('gulp-watch');
watch('./src/**/*.html', function () {
browserSync.reload();
});