使用Gulp + Gulp-Watch + BrowserSync.

目标是运行一个额外的进程来监视文件中的任何更改。发生更改时，页面为automatically 重新加载，包括CSS注入/滚动/浏览器单击，并且所有操作都同时跨多个设备和浏览器进行。因为它还生成一个ip：端口，您可以从网络中的其他设备访问该链接。

这gulpfile.js task 基于roots.io - Sage theme.

<小时>

var $           = require(\'gulp-load-plugins\')();
var gulp        = require(\'gulp\');
var browserSync = require(\'browser-sync\');

<小时>

gulp.task(\'watch-local.dev\', function() { 
  init_watch ( false, 3001, { target: \'http://local.dev\' } ); 
});

---

此突破功能允许您为每个环境创建任务，包括；MAMP, WAMP, Docker 和Vagrant &；切换http / https 单独进行。注：local.dev 是的副产品Vagrant Host Manager.

function init_watch (https, port, proxy) {

    var defaults = {
        port: 3001,
        https: true,
        proxy: config.devUrl // { target: \'http://your-expected-site-name.com\' }
    };

    if( typeof https !== \'boolean\') { https = defaults.https; }
    if( typeof port !== \'number\') { port = defaults.port; }
    if( typeof proxy === \'string\') { proxy = { target: proxy }; } // fix the format if only target is passed
    if( typeof proxy !== \'object\') { proxy = defaults.proxy; }

    browserSync({
        proxy: proxy,
        https: https,
        port: port,
        snippetOptions: {
            whitelist: [\'/wp-admin/admin-ajax.php\'],
            blacklist: [\'/wp-admin/**\']
        }
    });

    gulp.watch([path.source + \'styles/**/*\'], [\'styles\']);
    gulp.watch([path.source + \'scripts/**/*\'], [\'jshint\', \'scripts\']);
    gulp.watch([path.source + \'fonts/**/*\'], [\'fonts\']);
    gulp.watch([path.source + \'images/**/*\'], [\'images\']);
    gulp.watch([\'bower.json\', \'assets/manifest.json\'], [\'build\']);
    gulp.watch(\'**/*.php\', function() {
        browserSync.reload();
    });
}

要执行此任务，您需要运行以下命令。还有一些方法可以从IDE启动gulp任务，包括：；PHPStorm / WebStorm, Atom.io 和Sublime.

gulp watch-local.dev

值得一提的是，除非您正在浏览站点的管理部分，否则代理通常运行良好。

您还需要Node.js 以及npm command-line tool 与它捆绑在一起。

如果需要部署内容，可以向其中添加任务FTP 更改时的文件