实时 CSS 预览可能性？

Question

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

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

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

我似乎想不出一个解决方案，关于如何让某种实时 CSS 预览正常工作有什么想法吗？

Answer 1

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

Gulp -

我会在 gulp 中设置一个开发标志来观察我的 SCSS 更改。使用 Gutil flags i would check If dev == true & trigger a FTP of the css as test.css with gulp ftp

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

网站Javascript-

我可能会根据您可以手动设置的本地存储设置某种触发器，以便在值为真时注入 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 上点击保存时，它都会构建它并将其推送到服务器，如果 localstorage dev 设置为 true，您的 javascript 应该将 test.css 注入到头。这个过程会很慢，但应该可以。

Answer 2

BrowserSync 非常适合这个，它为我的视图和样式更改添加了文件夹（目标是 gulp 放置我完成的样式表的文件夹）并且它非常有用。易于设置，无后顾之忧。

实时 CSS 预览可能性？

Live CSS preview possibilities?

css

ubuntu

laravel

gulp

laravel-elixir