制作PhpStorm监视（特定）文件并在更改时上传

Question

我正在寻找PhpStorm观看文件的方法 - 这样每次更改时，它都应该将该文件同步到远程服务器。 ＆＃39;上传外部更改＆＃39; -option（使用＆＃39; On显式保存操作＆＃39;）不为我工作。它很近 - 但没有雪茄。它让我保存了两次css文件 - 只有在第二次保存scss文件之后，它才会上传gulp-compiled-style.css文件，就像我希望它在第一次＆＃39之后一样;保存＆＃39 ;.我知道这是一件非常重要的事情 - 但对于我每天容易做200到400次的事情，我希望它尽可能顺利地运行。这是我花两次保存文件的时间 - 但这也是我心中的疑问，每次有些事情都不像我想要的那样 - 那么我总是要先检查一下，如果文件正确上传。

我正在使用Wordpress，我有一个5-8个SCSS文件，正在使用gulp编译。 gulp程序非常全面（autoprefixer，merge-media-queries，minifycss等等），因此编译文件需要几个毫秒。我认为编译时间会让PhpStorm错过＆＃39; style.css已经改变了 - 因此不要在第一次“保存”上传它。因为有时候所有内容都是在第一次“保存”之后上传的。 - 但它只是每隔8次（左右）。

额外有趣的事实（可能表明身体被埋葬的地方）：如果我在后台从终端运行gulp watch，那么我必须保存文件，等待至少2-4秒然后在上传gulp-compiled-style.css文件之前再次保存。如果我按＆＃39;保存＆＃39;，保存＆＃39;，＆＃39;保存＆＃39;保存＆＃39; - 暂停时间少于2-4秒，但暂停只有1秒，那么PhpStorm永远不会同步gulp-compiled-style.css文件。    如果我从PhpStorm的Gulp集成中运行gulp watch（不是终端，而是Gulp-prompt），那么我可以连续保存两次，之间只有0.5秒的暂停（一旦底部的进度条消失） - 然后上传（每次， - 一致）。

只有上传gulp-compiled-style.css文件就是问题所在。其他一切都很完美。

以下是我的尝试：

**尝试1）我之前使用的是Atom，其中使用带有.ftpconfig文件的插件建立了FTP配置。在该文件中，有一个'watch: []' - 参数，我可以在其中指定一个文件来观看＆＃39;。这创造了奇迹！我试过找一个能做类似事情的插件 - 却无法找到它。

**尝试2）我读了support-pages之一，关于同一个问题。看起来如果使用PhpStorm编译SCSS文件，那么它就知道上传style.css文件（在编译之后）。我无法使用PhpStorms＆＃39;设置我的gulp文件。 SCSS编译（因为它编译它然后通过多个程序管道内容。如果我改变项目并且每次必须设置它，那么这将是一个痛苦的维护。

**尝试3）我想过制作一个宏或什么的。然后看看我是否可以将CMD-s重新映射到＆＃39; save-current-file-and-execute-the-macro＆＃39;。但是如果我不编辑scss文件（但只是一些php文件），那么它仍会上传style.css文件。它绝不是一个漂亮的解决方案，但它只是显示了我已经走了多远，找到了自动化解决方案。

**尝试4）我考虑将其构建到gulp文件中，它必须在编译style.css文件后上传style.css文件。我想到从.idea - 文件夹中获取主机和用户名 - 并从钥匙串获取密码，然后以这种方式建立sftp连接。但是它很快就变得非常广泛，所以我希望有一种更简单/更好的方法。

加法1

LazyOne问道，我曾经尝试过使用File Watchers，所以这里有。我试着让PhpStorm编译Scss文件（所以PhpStorm基本上做了Gulp今天为我做的事）。 这是一个SCSS-filewatcher（文件类型），范围是我项目中的SCSS文件，指向“程序”。我的ruby安装的scss文件等等等。

然而......我意识到很难让PhpStorm像Gulp文件那样对Scss文件做同样的事情。

我使用的Gulp文件随每个项目一起提供（默认情况下） - 我们是在同一个项目上工作的几个网页设计师。因此，如果我突然做其他使用Gulp文件的事情，那么我很确定我必须能够产生完全相同的结果，否则我很确定我的同事会皮肤我还活着。但是在我放弃之前，我做到了这一点就是把它作为我的论据（我仍然需要在这行中做几件事，然后才能完成我的Gulp文件）：

--no-cache --update $FileName$:../../style.css --style compressed --sourcemap=none

...但是......当这样做时，我可以得出结论，每次保存（得分！）都会上传style.css文件 。这意味着如果我可以设置某种文件监视器，那么希望PhpStorm将观看该文件，因此在Gulp编译style.css之后上传它。

所以我尝试制作一个文件观察器，它可以观看style.css文件 - 但我不知道该怎样放作我的程序＆＃39;。因为基本上我希望PhpStorm用一根棍子将style.css文件捅三次 - 然后意识到文件已经改变并将其上传到服务器。这可以自动完成吗？

Answer 1

确定。以下是它的完成方式！

重要的是PhpStorm观看style.css文件。如果你指向文件观察器来查看文件，它会这样做。现在，我首先尝试使用File Watcher运行Gulp文件。然后我尝试使用File Watcher编译scss文件。但这不是必要的。重要的部分是刷新＆＃39;输出路径。 （正如@LazyOne在评论中指出的那样）。因此，我所要达到的最佳解决方案是制作一个什么都不做的bash脚本。它看起来像这样：

#!/bin/bash

sleep .01

我称之为“没事”。我没有必要sleep .01才能使用它，但它并没有阻止它工作（基于我已完成的20次上传测试）。在我看来，如果在保存scss文件之后有短暂的延迟，那就更好了（因此在PhpStorm中的gulp-integration有时间完成编译style.css文件）。

这是我的文件监视器的设置：

范围是定制的，我已将其设置为：

file[PROJECTNAME]:wp-content/themes/THEME_NAME/assets/sass/*

但是我认为范围可能只是整个项目，因为它只是在＆＃39;程序之前查找SCSS文件在该范围内发生变化的时间。执行（如果我已经理解了整个文件观察器的东西）。

我正在开发一个项目，其中SCSS文件位于

/wp-content/themes/THEME_NAME/assets/sass/STYLEDIRNAME/

在这种情况下，然后刷新＆＃39;输出路径＆＃39;应该按照以下几点设置：

$FileDirRelativeToProjectRoot$/../../style.css

或

$ProjectFileDir$/wp-content/themes/THEME_NAME/style.css

如果您展开＆＃39;其他选项＆＃39;，那么您必须将Working directory设置为项目的根，才能使其正常工作：

/Users/USERNAME/dropbox/foo/bar/

这个解决方案的缺点是，如果PhpStorm比Gulp任务快，那么 - 因为它会在Gulp任务完成编译之前上传style.css文件（因此上传旧的或不完整的文件）。在我的20次简短测试中并没有发生这种情况。但如果它发生了，那么我会在'donothing＆＃39; -file中设置更高的延迟，看看是否能解决它。

添加1

我刚刚经历过，它没有工作 - 它没有在每次编译/保存时上传style.css（但我可以发誓设置是正确的）。所以我重新启动了PhpStorm然后它工作了。我尝试首先重新启动gulp watch - 流程，但这并没有什么不同。