cari

Rumah  >  Soal Jawab  >  teks badan

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

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']);
習慣沉默習慣沉默2834 hari yang lalu775

membalas semua(3)saya akan balas

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-19 10:47:36

    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);
    });

    balas
    0
  • ringa_lee

    ringa_lee2017-05-19 10:47:36

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

    balas
    0
  • 滿天的星座

    滿天的星座2017-05-19 10:47:36

    .

    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']);

    balas
    0
  • Batalbalas