javascript - penyegerakan penyemak imbas gulp tidak dapat dimuatkan secara dinamik dan sentiasa menyegarkan halaman Sila selesaikan.

Question

Setiap kali saya mengubah suai fail js atau html, penyemak imbas menyegarkan halaman tersebut. tanpa memuatkan semula. Ini tidak seperti apa yang dikatakan dalam talian

Ini kod saya:

browserSync = require('browser-sync').create(),
 
 var htmlSrc = ['app/**/*.html', '!app/index.html', '!app/lib/**/*.html', '!app/lib/*.html'];
var jsSrc = ['app/**/*.js', '!app/lib/**/*.js', '!app/assets/**/*.js'];
var cssSrc = ['app/assets/**/*.css', '!app/lib/**/*.css'];

var imgSrc = ['app/assets/img/*', 'app/assets/img/**/*'];

var fontSrc = ['app/assets/fonts/**/*'];

var jsonSrc = ['app/translate/*.json', 'app/translate/**/*.json'];

var libSrc = ['app/lib/**/*'];

var indexSrc = 'app/index.html';

var buildPath = 'dist/';
var debugPath = 'app/';
 
 gulp.task('createIndex', function() {
    return gulp.src(indexSrc)
    .pipe(replace(/\.js/g, '.min.js'))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.stream());
});

gulp.task('compressHTML', function() {
    return gulp.src(htmlSrc)
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.stream());
});

gulp.task('compressJS', function() {
    var filterIndex = filter(['**/app.config.js', '**/app.module.js', '**/app.route.oclazy.js'], {restore: true});
    return gulp.src(jsSrc)
    .on('error', function(err) {//语法检查，打印错误
        console.log('Error: ', err.message);
    })
    .pipe(filterIndex)
    .pipe(rename({suffix: '.min'}))
    .pipe(filterIndex.restore)
    .pipe(uglify())//压缩
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.stream());
});

gulp.task('compressCSS', function() {
    return gulp.src(cssSrc)
    //.pipe(concat('index.min.css')) 为了使用 oclazyload 不整合
    .pipe(minifycss())
    .pipe(gulp.dest(buildPath + 'assets'))
    .pipe(browserSync.stream());
});

gulp.task('compressJSON', function () {
    return gulp.src(jsonSrc)
        .pipe(jsonminify())
        .pipe(gulp.dest(buildPath + 'translate'))
        .pipe(browserSync.stream());
});

gulp.task('copyImg', function() {
    return gulp.src(imgSrc)
    .pipe(gulp.dest(buildPath + 'assets/img'))
    .pipe(browserSync.stream());
});

gulp.task('copyLib', function() {
    return gulp.src(libSrc)
    .pipe(gulp.dest(buildPath + 'lib'))
    .pipe(browserSync.stream());
});

gulp.task('copyFont', function() {
    return gulp.src(fontSrc)
    .pipe(gulp.dest(buildPath + 'assets/fonts'))
    .pipe(browserSync.stream());
});

gulp.task('clean', function() {
    return gulp.src(buildPath)
    .pipe(clean());
});

gulp.task('startCreate', ['clean'], function() {
    runSequence('createIndex', 
    ['compressHTML', 'compressJS', 'compressCSS', 'compressJSON'],
    ['copyLib', 'copyImg', 'copyFont']);
});

gulp.task('browserSync', function() {
    gulp.start('startCreate');

    browserSync.init({
        server: {
            baseDir: buildPath
        }
    });

    gulp.watch(indexSrc, ['createIndex']);
    gulp.watch(htmlSrc, ['compressHTML']);
    gulp.watch(jsSrc, ['compressJS']);
    gulp.watch(cssSrc, ['compressCSS']);
    gulp.watch(jsonSrc, ['compressJSON']);
});

gulp.task('default', ['browserSync']);

Answer 1

Jawapan baharu: // Ruang komen tidak sesuai
Saya sangat menyesal kerana saya tidak pernah melihat cara penulisan anda Ini adalah peningkatan saya kepada versi ionic 1.0

var del = require('del');
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var gutil = require('gulp-util');
var babel = require('gulp-babel');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var assign = require('lodash.assign');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var gulpIf = require('gulp-if');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var options = require('./config/gulp.config');
var htmlmin = require('gulp-htmlmin');
var changed = require('gulp-changed');
var minimist = require('minimist');
var watchify = require('watchify');
var browserify = require('browserify');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');

var reload = browserSync.reload;
var argv = minimist(process.argv.slice(2));
// concat <> browserify
var mode = argv.mode;
var debug = argv.debug;

var browserifyOptions = assign({}, watchify.args, {entries: [options.scripts.main] ,debug: argv.debug});
var brify = watchify(browserify(browserifyOptions));
brify.on('update', scriptsBundle);
brify.on('log', gutil.log);
gulp.task('scripts_browserify', scriptsBundle);
function scriptsBundle(){
  return brify.bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source(options.scripts.outputFile))
    .pipe(buffer())
    .pipe(gulpIf(argv.debug ,sourcemaps.init({loadMaps: true})))
    .pipe(gulpIf(!argv.debug ,uglify()))
    // .pipe(gulpIf(!argv.debug ,rename({extname: ".min.js"})))
    .pipe(gulpIf(argv.debug ,sourcemaps.write('./')))
    .pipe(gulp.dest(options.scripts.dist))
    .pipe(gulpIf(argv.debug ,reload({stream: true})));
}

gulp.task('scripts_concat' ,() => {
  return gulp.src(options.scripts.src)
      .pipe(plumber())
      .pipe(gulpIf(argv.debug ,sourcemaps.init()))
      .pipe(babel({presets: ['es2015']}))
      .pipe(concat(options.scripts.outputFile))
      .pipe(gulpIf(!argv.debug ,uglify()))
      // .pipe(gulpIf(!argv.debug ,rename({suffix: ".min"})))
      .pipe(gulpIf(argv.debug ,sourcemaps.write('./')))
      .pipe(gulp.dest(options.scripts.dist))
      .pipe(reload({stream: true}));
});

gulp.task('templates' ,() => {
  return gulp.src(options.templates.src)
    .pipe(changed(options.templates.dist))
    .pipe(gulpIf(!argv.debug ,htmlmin()))
    .pipe(gulp.dest(options.templates.dist))
    .pipe(reload({stream: true}));
});

gulp.task('styles' ,['styles:fonts'] ,() => {
  return gulp.src(options.styles.main)
    .pipe(changed(options.styles.dist))
    .pipe(gulpIf(argv.debug ,sourcemaps.init()))
    .pipe(sass({outputStyle: argv.debug?'expanded':'compressed'}).on('error' ,sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'Android >= 4.0'] ,
      cascade: argv.debug ,
      remove:true
    }))
    .pipe(rename(options.styles.outputFile))
    // .pipe(gulpIf(!argv.debug ,rename(path => path.basename += '.min')))
    .pipe(gulpIf(argv.debug ,sourcemaps.write('./')))
    .pipe(gulp.dest(options.styles.dist))
    .pipe(reload({stream: true}));
});

gulp.task('styles:fonts' ,() => {
  return gulp.src(options.styles.fonts.src)
    .pipe(changed(options.styles.fonts.dist))
    .pipe(gulp.dest(options.styles.fonts.dist))
    .pipe(reload({stream: true}));
});

gulp.task('resources' ,() => {
  return gulp.src(options.resources.src)
    .pipe(changed(options.resources.dist))
    .pipe(gulp.dest(options.resources.dist))
    .pipe(reload({stream: true}));
});

gulp.task('images' ,() => {
  return gulp.src(options.images.src)
    .pipe(changed(options.images.dist))
    .pipe(gulp.dest(options.images.dist))
    .pipe(reload({stream: true}));
});

gulp.task('server' ,['templates' ,'styles' ,`scripts_${mode}` ,'images' ,'resources'] ,() => {
  browserSync.init(options.server);
  gulp.start('watch');
});

gulp.task('build' ,['templates' ,'styles' ,`scripts_${mode}` ,'images' ,'resources'] ,() => {});

gulp.task('watch' ,() => {
  watch(options.styles.src , () => { gulp.start('styles'); });
  watch(options.styles.fonts.src , () => { gulp.start('styles:fonts'); });
  watch(options.scripts.src ,() => { gulp.start(`scripts_${mode}`); });
  watch(options.templates.src ,() => { gulp.start('templates'); });
  watch(options.resources.src ,() => { gulp.start('resources'); });
  watch(options.images.src ,() => { gulp.start('images'); });
  watch(['./www/index.html' ,'./www/js/logic.js'] ,() => {
    reload();
  });
});

gulp.task('clean' ,() => {
  return del(options.clean);
});

gulp.task('default' ,['clean'] ,() => {
  gulp.start(argv.debug?'server':'build' ,() =>{
    if(!argv.debug) process.exit(0);
  });
});

---

Saya tidak pernah melihat penggunaan ini, sila lihat dokumentasi rasmi http://www.browsersync.cn/doc...

// 使用变量引用 `reload` 方法
var reload = browserSync.reload;

// 编译 SASS & 自动注入到浏览器
gulp.task('sass', function () {
    return gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('css'))
        .pipe(reload({stream:true}));
});

// 监听scss和html文件, 当文件发生变化后做些什么！
gulp.task('serve', ['sass'], function () {

    // 从这个项目的根目录启动服务器
    browserSync({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.html").on("change", browserSync.reload);
});

Answer 2

Adakah anda masih memantau pelayan?
Kemudian muat semula tanpa perubahan?
gulp.watch("*.html").on("change", browserSync.reload);

Answer 3

.

Selain itu, versi gulp saya ialah 3.9.1

gulp.task('createIndex', ['moveFavicon'], function() {
    return gulp.src(indexSrc)
    .pipe(replace(/\.js/g, '.min.js'))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('compressHTML', function() {
    return gulp.src(htmlSrc)
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('compressJS', function() {
    var filterIndex = filter(['**/app.config.js', '**/app.module.js', '**/app.route.oclazy.js'], {restore: true});
    return gulp.src(jsSrc)
    .on('error', function(err) {//语法检查，打印错误
        console.log('Error: ', err.message);
    })
    .pipe(filterIndex)
    .pipe(rename({suffix: '.min'}))
    .pipe(filterIndex.restore)
    .pipe(uglify())//压缩
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('compressCSS', function() {
    return gulp.src(cssSrc)
    //.pipe(concat('index.min.css')) 为了使用oclazyload不整合
    .pipe(minifycss())
    .pipe(gulp.dest(buildPath + 'assets'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('compressJSON', function () {
    return gulp.src(jsonSrc)
        .pipe(jsonminify())
        .pipe(gulp.dest(buildPath + 'translate'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('copyImg', function() {
    return gulp.src(imgSrc)
    .pipe(gulp.dest(buildPath + 'assets/img'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('copyLib', function() {
    return gulp.src(libSrc)
    .pipe(gulp.dest(buildPath + 'lib'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('copyFont', function() {
    return gulp.src(fontSrc)
    .pipe(gulp.dest(buildPath + 'assets/fonts'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('clean', function() {
    return gulp.src(buildPath)
    .pipe(clean());
});

gulp.task('startCreate', ['clean'], function() {
    runSequence('createIndex', 
    ['compressHTML', 'compressJS', 'compressCSS', 'compressJSON'],
    ['copyLib', 'copyImg', 'copyFont']);
});

gulp.task('browserSync', function() {
    gulp.start('startCreate');

    browserSync.init({
        server: {
            baseDir: buildPath
        }
    });

    gulp.watch(indexSrc, ['createIndex']).on("change", browserSync.reload);
    gulp.watch(htmlSrc, ['compressHTML']).on("change", browserSync.reload);
    gulp.watch(jsSrc, ['compressJS']).on("change", browserSync.reload);
    gulp.watch(cssSrc, ['compressCSS']).on("change", browserSync.reload);
    gulp.watch(jsonSrc, ['compressJSON']);
});

gulp.task('default', ['browserSync']);