从构建文件夹 Gulp livereload

Question

一切正常，除了 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']);

Answer 1

我们工作的watch gulp 配置示例如下：

var watch = require('gulp-watch');

watch('./src/**/*.html', function () {
    browserSync.reload();
});