Question

最近我一直在设计我的应用程序样式，我有人告诉我使用实时预览会很棒。但是，我似乎找不到任何可以在我的特定工作环境中工作的东西。

我目前在Laravel工作，我的应用程序在我的本地网络上的Ubuntu PC上运行。我将我的样式分为2个文件，一个用于元素样式，一个用于flexbox布局，当我保存其中一个文件gulp / elixir触发器并将其从SCSS编译为CSS，然后抓取规范化并将它们放在一个大文件中。 / p>

大多数程序，如实时重新加载和检查文件是否在本地保存的工作，我将其保存在Sublime文本3中，然后使用FTP扩展程序上传它，然后gulp触发并完成所有魔法。

我似乎无法解决一个解决方案，任何关于如何使某种实时CSS预览工作的想法？

Answer 1

我实际上不认为这会那么难。如果我有像你这样的环境，我就会这样做。

Gulp -

我会在gulp中设置一个dev标志来监视我的SCSS更改。使用Gutil标志我会检查如果dev == true＆amp;使用gulp ftp

触发css的FTP作为test.css

.pipe(isDev ? .pipe(ftp({ /* settings here */ })  : gutil.noop() )

网站Javascript -

我会根据你手动设置的localstorage设置某种触发器，如果value为true则注入test.css。实施例;

if ( localStorage.getItem('dev') === true ) {
  var head = document.head,
      link = document.createElement('link')

  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = '{url}' // test.css

  head.appendChild(link);

}

所以，每当你点击SCSS上的保存时，它都会构建它并将其推送到服务器＆amp;如果localstorage dev设置为true，则javascript应该将test.css注入头部。这个过程会很慢，但应该有效。

Answer 2

BrowserSync是完美的，为我的视图和样式更改添加了文件夹（针对gulp放置完成的样式表的文件夹），它就像一个魅力。易于设置，无后顾之忧。

实时CSS预览可能性？

2 个答案: