前端工具-浏览器同步测试（自动刷新热刷新热加载）

Posted 2021-01-31 jffun-blog

Browsersync

官网：https://www.browsersync.io/

中文：http://www.browsersync.cn/

Gulp中使用

http://www.browsersync.cn/docs/gulp/

注意1：我测试哪个tesk在下面哪个好使（要么能使用静态服务器，要么用代理？）貌似不能部分请求用代理。。

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

// 静态服务器
gulp.task(‘browser-sync‘, function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// 代理
gulp.task(‘browser-sync‘, function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
});

注意2：proxy后定义了路径startPath就不起作用了

gulp.task(‘browser-sync‘, function() {
    browserSync.init({
        // path为首次启动路径，host为个请求转发的地方
        proxy: "localhost:3448/data-entry/index.aspx",
        /* 
          proxy后定义了路径startPath就不起作用了

          proxy: "localhost:3448/data-entry/index.aspx",
          和
          proxy: "localhost:3448",
          startPath: "/data-entry/index.aspx"
          一样
        */
    });
});

Grunt中使用

gruntfile.js

module.exports = function(grunt) {

    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);


    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),

        htmlhint: {
            build: {
                options: {
                    ‘tag-pair‘: true,
                    ‘tagname-lowercase‘: true,
                    ‘attr-lowercase‘: true,
                    ‘attr-value-double-quotes‘: true,
                    ‘doctype-first‘: true,
                    ‘spec-char-escape‘: true,
                    ‘id-unique‘: true
                },
                src: [‘index.html‘]
            }
        },

        uglify: {
            options: {
                sourceMap: true
            },
            build: {
                files: {
                    ‘build/js/script.min.js‘: [/*your files*/]
                }
            }
        },

        cssmin: {
          combine: {
            files: {
              ‘build/css/style.min.css‘: [/*your files*/]
            }
          }
        },

        watch: {
            html: {
                files: [/*your files*/],
                tasks: [‘htmlhint‘]
            },
            js: {
                files: [/*your files*/],
                options: {
                    sourceMap: true
                },
                tasks: [‘uglify‘]
            },
            css: {
                files: [/*your files*/],
                tasks: [‘cssmin‘]
            }
        },

        browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        ‘build/css/*.css‘,
                        ‘build/js/*.js‘,
                        ‘index.html‘,
                    ]
                },
                options: {
                    watchTask: true,
                    proxy: "localhost:3448/index.html",
                }
            }
        },
    });

    // Browsersync是不能替代常规watch任务（如编译SASS，LESS等等），它们被设计为一起使用。如果你打算这样做，你就需要设置watchTask：true ，一定要在 Browsersync 之后执行监听任务。
    grunt.registerTask(‘default‘, [‘browserSync‘, ‘watch‘]);

};

依赖：

"devDependencies": {
    "grunt": "0.4.x",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-cssmin": "0.7.x",
    "grunt-contrib-uglify": "^3.3.0",
    "grunt-contrib-watch": "0.5.x",
    "grunt-cssc": "0.2.x",
    "grunt-htmlhint": "0.4.x",
    "grunt-shell": "0.5.x",
    "matchdep": "0.3.x",
    "topojson": "1.4.x"
}

webpack-dev-server

https://webpack.js.org/configuration/dev-server/

使用浏览器同步测试（自动刷新、热刷新、热加载）打开的页面访问服务端接口违反同源策略

使用 代理（proxy） 解决