Gulp liverload在Chrome中不起作用

bogh5gae  于 2022-12-08  发布在  Gulp
关注(0)|答案(2)|浏览(204)

所以我试着设置livereload服务器,但是,我从来没有得到消息Live reload server listening on: <port_number>像在这个video。如果我改变我的文件,控制台说,文件被重新加载。我有Chrome扩展安装。我错过了什么?谢谢。
gulpfile.js

'use strict';

// include gulp
var gulp = require('gulp'),
    gutil = require('gulp-util');

// include plug-ins
var autoprefix = require('gulp-autoprefixer'),
    changed = require('gulp-changed'),
    concat = require('gulp-concat'),
    http = require('http'),
    imagemin = require('gulp-imagemin'),
    jshint = require('gulp-jshint'),
    livereload = require('gulp-livereload'),
    minifyCSS = require('gulp-minify-css'),
    minifyHTML = require('gulp-minify-html'),
    sass = require('gulp-sass'),
    st = require('st'),
    stripDebug = require('gulp-strip-debug'),
    uglify = require('gulp-uglify');

gulp.task('build-css', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/styles'));
});

// minify new or changed HTML pages
gulp.task('htmlpage', function() {
  var htmlSrc = './src/*.html',
      htmlDst = './dist';

  return gulp.src(htmlSrc)
    .pipe(changed(htmlDst))
    .pipe(minifyHTML())
    .pipe(gulp.dest(htmlDst));
});

// minify new images
gulp.task('imagemin', function() {
  var imgSrc = './src/images/**/*',
      imgDst = './dist/images';

  return gulp.src(imgSrc)
    .pipe(changed(imgDst))
    .pipe(imagemin())
    .pipe(gulp.dest(imgDst));
});

// JS hint task
gulp.task('jshint', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
  return gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./dist/scripts/'));
});

gulp.task('server', function(done) {
  http.createServer(
    st({
      path: __dirname + '/dist', 
      index: 'index.html', 
      cache: false
    })
  ).listen(8080, done);
});

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  return gulp.src(['./src/styles/*.css'])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./dist/styles/'));
});

gulp.task('watch', ['server'], function() {
  livereload.listen({
    basePath: 'dist'
  });

  // watch for HTML changes
  gulp.watch('./src/*.html', ['htmlpage']).on('change', livereload.changed);

  // watch for JS changes
  gulp.watch('./src/scripts/*.js', ['jshint', 'scripts']).on('change', livereload.changed);

  // watch for CSS changes
  gulp.watch('./src/styles/*.css', ['styles']).on('change', livereload.changed);

  gulp.watch('src/scripts/**/*.js', ['jshint']).on('change', livereload.changed);
  gulp.watch('src/styles/scss/**/*.scss', ['build-css']).on('change', livereload.changed);
});

// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'watch'], function() {
  return gutil.log('Gulp is running!')
});
bprjcwpo

bprjcwpo1#

我使用浏览器同步来在文件更改时重新加载浏览器。请尝试以下操作:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {

    gulp.watch("app/**/*.js").on('change', browserSync.reload);
    gulp.watch("templates/**/*.html").on('change', browserSync.reload);
    gulp.watch("css/**/*.css").on('change', browserSync.reload);

    browserSync.init({
        server: "./"
    });

});

gulp.task('default', ['serve']);
avwztpqn

avwztpqn2#

我建议您注意实时浏览器页面重新加载工具。

实时重新加载浏览器页

Live Reload Browser Page
GitHub
易于使用。独立于IDE工作。但您需要IDE能够自动保存文件。也可以与Gulp、WebPack、Grunt等工具一起工作。

相关问题