Browsersync + Grunt.js

我们为 Grunt 提供了 官方插件 ，这让 Browsersync 整合进你的开发流程变得很容易。下面是一些常用配置的示例，便于快速上手 - 可以将它们 作为一个起点，但是不要忘记你还可以使用任何其他 Browsersync 参数 。

首先，你需要安装 Browsersync 插件...

$ npm install grunt-browser-sync --save-dev

... 然后将此行添加到你的 Gruntfile.js 文件

grunt.loadNpmTasks('grunt-browser-sync');

最简单的例子是监视 CSS 文件并使用内置服务器托管这些 HTML/CSS/JS 静态文件。仅使用此配置就可以启动一个小型服务器（使用当前目录作为根目录）， 监视 CSS 文件的改变并将这些改变字东注入到所有已连接的浏览器端。

browserSync: {
    bsFiles: {
        src : 'assets/css/*.css'
    },
    options: {
        server: {
            baseDir: "./"
        }
    }
}

如果你已经在本地配置了一个服务器（利用 vhosts 等技术），只需将相关信息告诉 Browsersync，它将为你完成其余的工作。

browserSync: {
    dev: {
        bsFiles: {
            src : 'assets/css/style.css'
        },
        options: {
            proxy: "local.dev"
        }
    }
}

浏览器同步功能并不能代替常规的 watch 任务（例如编译 SASS、LESS 等）， 他们被设计成一起使用。如果你打算这样做，你需要设置 watchTask: true 并确保 在 Browsersync 之后调用 watch 任务。例如，编译 SASS，然后将 CSS 注入到所有打开的浏览器中 （如需刷新页面），这三个任务的而配置可能像下面这样：

// This shows a full config file!
module.exports = function (grunt) {
    grunt.initConfig({
        watch: {
            files: 'app/scss/**/*.scss',
            tasks: ['sass']
        },
        sass: {
            dev: {
                files: {
                    'app/css/main.css': 'app/scss/main.scss'
                }
            }
        },
        browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        'app/css/*.css',
                        'app/*.html'
                    ]
                },
                options: {
                    watchTask: true,
                    server: './app'
                }
            }
        }
    });

    // load npm tasks
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    // define default task
    grunt.registerTask('default', ['browserSync', 'watch']);
};

Jump to...