ライブCSSプレビューの可能性？

Question

最近、私はアプリケーションのスタイリングに多くの作業をしていました。ライブプレビューを使用すると素晴らしいものになると教えてくれました。しかし、私は自分の特定の職場環境でうまくいくものを見つけることができません。

私は現在Laravelで働いていますが、ローカルネットワーク上のUbuntu PCでアプリケーションを実行しています。私はgulp/elixirトリガーの1つを保存し、それをSCSSからCSSにコンパイルし、正規化して1つの大きなファイルにまとめると、私はスタイリングを2つのファイルに分けました。

ファイルがローカルに保存されているかどうかをチェックするライブリロードなどのほとんどのプログラムでは、サブライムテキスト3で保存し、FTP拡張子を使用してアップロードした後、トリガーを実行してすべての魔法を実行します。

私は解決策の周りに私の心を包み込むように見えることができません、どのようにどのようにライブCSSプレビューの仕事を得るためにどのようなアイデアですか？

Answer 1

BrowserSyncはこれにぴったりです。私のビューとスタイルの変更（gulpが完成したスタイルシートを置くフォルダをターゲットにする）の両方にフォルダを追加し、魅力的に機能しました。セットアップが簡単で心配もありません。

Answer 2

私は実際これが難しいとは思わない。あなたのような環境があれば、これは私がやることです。

ガルプ -

私はSCSSの変化を見てしまう一気内のdevのフラグを設定します。

私は、トリガのいくつかの種類を設定します多分に基づいて - gulp ftp

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

ウェブサイトのJavascriptとtest.cssとしてのCSSのFTPは、DEV ==真&トリガーした場合、私がチェックしますGutilフラグを使用して test.cssの値がtrueの場合、手動で設定できるlocalstorageを挿入します。例。

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); 

} 

だから、すべて一緒にあなたがヒットするたびに、それはそれを構築するとのlocalStorage devのはあなたのjavascriptが頭の中にtest.cssを注入すべきであるtrueに設定されている場合、サーバー&にそれをプッシュしますSCSSに保存します。 このプロセスは遅くなりますが、うまくいくはずです。