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） 解決

前端工具-瀏覽器同步測試（自動刷新、熱刷新、熱加載）