Browsersync + Grunt.js

我们在grunt下有一个正式的插件 official Plugin, 使得它轻松地将 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: "./"
        }
    }
}

如果你已经有一个本地的服务器设置(虚拟主机等),只需要告诉Browsersync,剩下的工作将由它为你完成。

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

Browsersync是不能替代常规watch任务(如编译SASS,LESS等等),它们被设计为一起使用。如果你打算这样做,你就需要设置watchTask:true ,一定要在 Browsersync 之后执行监听任务。例如,编译SASS,然后将CSS注入到所有打开的浏览器(不刷新页面),这三个任务的配置可能是以下这个样子:

// 这是一个完整的配置文件!
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'
                }
            }
        }
    });

    // 加载NPM任务 
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    // 定义默认任务
    grunt.registerTask('default', ['browserSync', 'watch']);
};