web-dev-qa-db-ja.com

2017年のHTML / CSSのライブリロード/リフレッシュソリューション

つまり、2017年であり、Webサイトをコーディングしている間も、ウィンドウを編集、保存、切り替えてから、更新を押す必要があります。小さな変更を加えて、もう一度やり直します。そしてまた。そしてまたなどなど。

入力するとブラウザが自動的に更新されるか、少なくとも[保存]をクリックするとすぐに更新できるという解決策があるので、何かが足りませんか？

jsbin.com は、ローカルのApache（Windows 10）セットアップで探しているものの完璧な実例です。 LiveReload や LiveJS など、さまざまな方法を試しましたが、時間がかかりすぎて2〜4秒程度のラグが発生することが多く、ビルドするのに十分な速さではありません。ウェブサイト。また、監視が必要なすべてのページにブラウザ拡張機能またはコードスニペットを挿入する必要があります。それはすべて非常に「ハッキー」で1990年代のようです。

他の開発者がこの問題をどのように処理するのか知りたいですか？今まで出会ったことのないNodeJSソリューションはありますか、それとも他のみんなが編集、保存、切り替え、更新の方法を実行しているだけですか？確かにそうではありませんか？参考までに、Atomを使用してhtml/css/jsファイルなどを編集し、Chromeで変更を保存して表示します。考えやアイデアがあれば、大歓迎です。実際に大いに感謝します。

javascripthtmlcssnode.jsbrowser-sync
7
Ben Clarke

Gulpを削除し、npmスクリプトを使用するようになりました https://www.npmjs.com/

package.jsonファイルで、SCSSを使用し、自動プレフィックスを付け、ファイルとスクリプトを醜く縮小し、出力するフォルダー（本番フォルダーなど）を制御できます。

これがpackage.jsonのサンプルセットアップです

{
    "name": "Sample build",
    "version": "1.0.0",
    "description": "New build",
    "author": "Author",
    "license": "MIT",
    "main": "index.html",
    "scripts": {
        "autoprefixer": "postcss -u autoprefixer -r production/css/*.css",
        "scss": "node-sass --output-style expanded --indent-width 4 -o production/css development/scss",
        "uglify": "uglifyjs development/js/*.js -m -o production/js/scripts.js",
        "serve": "browser-sync start --server --files \"production/css/*.css, production/js/*.js\"",
        "build:css": "npm run scss && npm run autoprefixer",
        "build:js": "npm run uglify",
        "build:all": "npm run build:css && npm run build:js",
        "watch:css": "onchange \"development/scss\" -- npm run build:css",
        "watch:js": "onchange \"development/js\" -- npm run build:js",
        "watch:all": "npm-run-all -p serve watch:css watch:js",
        "start": "npm run build:all && npm run watch:all"
    },
    "devDependencies": {
        "node-sass": "^4.5.0",
        "postcss-cli": "^3.0.0-beta",
        "autoprefixer": "^6.7.6",
        "browser-sync": "^2.18.8",
        "npm-run-all": "^4.0.2",
        "onchange": "^3.2.1",
        "uglify-js": "^2.8.3"
    }
}

および対応するファイル構造の設定：

Project
|__ development
|       |____ js
|       |____ scss
|
|__ production
|        |___ js
|        |___ css
|        |___ images
|
|_ index.html
|_ package.json

開発者がしなければならないのは、npm installを実行してからnpm startを実行することだけです。

11
StefanBob

live-server および json-server 。

ライブサーバーを使用すると、アプリケーションをWebサーバー（nodejs）でインスタントラップし、すべてのソースをブラウザーにライブリロードできます（webSocketを介して）。

プロジェクトフォルダに$> live-serverと入力するだけで、機能します。

これをjson-serverと組み合わせて使用​​すると、JSONファイルからjsonキーと値を使用してCRUD REST APIを作成する非常に簡単な方法が得られます。

DBスキーマを含む.jsonファイルをjson形式で提供します。$> json-server --watch mydb.jsonと入力するだけで、問題なく機能します。

2分の時間で、ライブリロード機能とカスタム分散APIを備えたWebサーバーが提供されます。

それがあなたを助けることを願っています！

3
john

task-runnerを使用することは、すべての自尊心のある開発者にとって絶対に基本です。

私の意見では、あなたの最善の策は、Gulpを、Browser-Syncと組み合わせて設定することです。事業。使用しているすべてのタイプのファイルの変更をリッスンするように設定できるため、何が変更され、何が変更されていないかを推測する手間が最小限に抑えられます。

これを行う方法についてのきちんとしたチュートリアルを見つけることができますここではCSSトリックについて

2019年12月17日更新：

より良いアプローチは、live-reloadを使用することですlive-serverと呼ばれるnpmプラグインを使用することです。

プロジェクトの親ディレクトリを開くだけです。 parent-dir/プロジェクトの場所（例： parent-dir/project。次に、ターミナルを開いて次のように入力します。


live-server project

Enterキーを押すと、プロジェクトがデフォルトのブラウザウィンドウで開きます。

注：npmを使用する場合は、nodejsが必要になります。

0
Tanasos