使用 gulp watch 和浏览器同步将本地 wordpress 安装与实时站点同步？答案

【问题标题】：Syncing local wordpress installation with live site using gulp watch and browser-sync?使用 gulp watch 和浏览器同步将本地 wordpress 安装与实时站点同步？
【发布时间】：2018-10-18 00:51:23
【问题描述】：

我正在使用 gulp watch 和浏览器同步在本地环境中创建一个 WordPress 网站。我如何才能让这个本地环境设置与实时网站同步，以便在开发中进行的文件更改和 sass 编译自动部署到实时网站？我还需要一些同步数据库表的方法。

干杯

【问题讨论】：

通常你将开发阶段和直播阶段分开。如果您真的想实时开发，我建议在您的服务器上安装节点（不是最佳解决方案）。否则，您可以使用 codeship 之类的程序来更新您对实时环境的提交。

标签： wordpress gulp browser-sync gulp-watch

【解决方案1】：

我建议不要自动同步您的环境。当您在本地破坏某些东西时，您也会立即在生产服务器上破坏它。

现在回答你的问题，使用像 FTPBox Download from their website 这样的程序

对于数据库同步，您必须在服务器和本地环境上编写导入/导出脚本，并使用mysqldump 之类的东西将数据库放入 .sql 文件中。（假设您使用的是 MySQL 或 MariaDB）

再次，我强烈建议您不要这样做，而是在一切都稳定后才进行部署。

【讨论】：

【解决方案2】：

我赞同上述关于将开发任务与部署分开的说法。您可以设置一个单独的 gulp 任务，仅在您确定要上传文件后运行。

如果您想使用 gulp 任务进行部署，请尝试 vinyl-ftp。从他们的文档中：

var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

gulp.task( 'deploy', function () {

    var conn = ftp.create( {
        host:     'mywebsite.tld',
        user:     'me',
        password: 'mypass',
        parallel: 10,
        log:      gutil.log
    } );

    var globs = [
        'src/**',
        'css/**',
        'js/**',
        'fonts/**',
        'index.html'
    ];

    // using base = '.' will transfer everything to /public_html correctly
    // turn off buffering in gulp.src for best performance

    return gulp.src( globs, { base: '.', buffer: false } )
        .pipe( conn.newer( '/public_html' ) ) // only upload newer files
        .pipe( conn.dest( '/public_html' ) );

} );

在你做任何事情之前一定要看看setting up your ftp credentials safely in gulp。这是一篇非常好的文章。和 .gitignore 任何凭证文件！

【讨论】：

干杯感谢它！