Question

我有一个gulp文件设置，它在编辑sass时刷新浏览器，但它忽略了html文件和php文件。我尝试了各种解决方案，包括浏览器扩展，但似乎没有任何效果。

这是我的gulpfile.js

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
image = require('gulp-image'),
notify = require('gulp-notify'),
livereload = require('gulp-livereload'),
del = require('del');

gulp.task('sass', function() {
return sass('sass/style.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9',         'opera 12.1', 'ios 6', 'android 4' ))
    .pipe(gulp.dest(''))
    .pipe(notify({ message: 'Styles task complete' }))
    .pipe(livereload());
});

gulp.task('image', function () {
gulp.src('library/images/src/*')
.pipe(image())
.pipe(gulp.dest('library/images'));
});

gulp.task('clean', function(cb) {
del(['library/css'], cb)
});

gulp.task('watch', function(){
var server = livereload();
livereload.listen();
gulp.watch('sass/**/*.scss', ['sass']);
gulp.watch('images/src/**/*', ['image']);
// PLEASE TELL ME WHAT TO ADD HERE TO LISTEN TO HTML & PHP
});

gulp.task('default', ['clean'], function() {
gulp.start('sass', 'image');
});

我还将其添加到所述文件的标题中：

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

感谢

Answer 1

对于位于同一文件夹中的HTML网页，请在watch任务上方创建新任务：

gulp.task('html', function() {
  gulp.src('./*.html')
    .pipe(livereload());
});

然后将此任务添加到watch，如下所示：

gulp.task('watch', function(){
  livereload.listen();
  gulp.watch('sass/**/*.scss', ['sass']);
  gulp.watch('images/src/**/*', ['image']);
  gulp.watch('./*.html', ['html']);
});

我没有为PHP测试过这个问题，但对于这些页面应该是相同的 - 添加一个名为php的新任务，然后将此行添加到watch：gulp.watch('./*.php', ['php']);

顺便说一句，我从var server = livereload();任务中删除了watch，因为它似乎没有必要。

gulp-livereload用于更改的html文件

1 个答案: