推奨されるフロントエンド自動化ツール

フロントエンド開発テクノロジーの継続的な開発により、フロントエンド開発作業はますます複雑になっています。いくつかの自動化ツールを合理的に使用できれば、作業ははるかに簡単になります。

LiveReload

私の現在のメイン開発マシンは、初期の 13 インチ Macbook Pro と Dell モニターです。フロントエンド開発をやっている人なら、この追加モニターがどれだけ作業効率を向上させるか分かると思います。

LiveReload テクノロジーと 2 つのディスプレイにより、ブラウザを繰り返し更新する退屈な作業を軽減できます。 LiveReload を実装するには、さまざまな方法があります。グラフィカルなデスクトップ アプリケーションを使用したい場合は、LiveReload.app を試してみてください。ファイルの場所を設定することもできます。グラフィカル インターフェイス フォルダーを通じて監視し、HTML ページにスクリプトを挿入します。


livereload.app

私と同じようにコマンドラインを使いたい場合は、次のコマンドを使用してinstall LiveReloadを実行できます。

npm i livereload -g

使用する場合は、作業ディレクトリで livereload を実行し、Chrome でプラグイン アイコンをクリックするだけで監視を開始できます。 livereload，然后在 Chrome 中点击插件图标启动监听就可以了。

Webpack

现在做前端开发，通常还会涉及到预处理器，虽然技术的多样化给我们带来了更多选择，但要这些技术产生的代码在浏览器中获得一致的表现，还得将其转化为浏览器支持的类型。

Webpack 是一款模块加载兼打包工具，丰富的插件让这款工具非常实用。虽然现在 Grunt 和 Gulp 作为两款前端自动化工具非常流行，但其实 Webpack结合Npm脚本在大多数场合就已经足够了。

安装 Webpack 非常简单，建议直接全局安装

$ npm install webpack -g

你可能还需要安装对应的加载器，比如 JSX loader, Less loader，这部分包建议安装在项目文件夹下。

$ npm install css-loader style-loader less-loader jsx-loader --save-dev

你只需要在 webpack 的配置文件中定义好加载器，各种流行的前端开发技术随你使用。

更多 Webpack 的用户请可参考官方文档。

django-webpack-loader

如果你在使用 Django ，django-webpack-loader是一款你不可错过的 Webpack 插件。

我们都知道浏览器缓存对页面加载速度的重要性， 同时我们也希望当资源文件发生变化时，页面能立刻向用户呈现变化。

通常的做法是将资源文件的 hash 值作为资源地址的一部分，比如<a href="http://www.php.cn/wiki/646.html" target="_blank">main</a>-cf4b5fab6e00a404e0c7.js

Webpack

現在、フロントエンド開発を行う場合、通常はプリプロセッサが関与しますが、テクノロジの多様化により選択肢は増えていますが、これらのテクノロジによって生成されたコードがブラウザで一貫したパフォーマンスを得るには依然として必要です。ブラウザがサポートする型に変換されます。

Webpack はモジュールのロードおよびパッケージ化ツールであり、豊富なプラグインによりこのツールは非常に実用的になります。 Grunt と Gulp は現在非常に人気のある 2 つのフロントエンド自動化ツールですが、実際には、Webpack とNpm スクリプトは世界中で非常に人気があり、ほとんどの状況ではこれで十分です。

Webpack のインストールは非常に簡単です。グローバルに直接インストールすることをお勧めします

JS

X ローダー、Less ローダー。パッケージのこの部分をプロジェクト フォルダーにインストールすることをお勧めします。

config.output.filename = '[name]-[hash].js';

Webpack の 設定ファイル

でローダーを定義するだけで、さまざまな一般的なフロントエンド開発テクニックに対応できます自由にご利用いただけます。

その他の Webpack ユーザーについては、公式ドキュメントを参照してください。

django

-webpack-loader

Django を使用している場合、django-webpack-loader は見逃せない Webpack プラグイン。

ページの読み込み速度に対するブラウザのキャッシュ
• の重要性は誰もが知っています。ファイルが変更されると、ページは即座に変更をユーザーに表示できます。
  通常のアプローチは、リソース ファイルのハッシュ
値をリソース アドレスの一部として使用することです。 <a href="http://www.php.cn/wiki/646.html" target="_blank">main<ul class=" list-paddingleft-2" style="list-style-type: square;">-cf4b5fab6e00a404e0c7.js</ul></a> など、Webpack はこの命名方法をサポートしていますが、設定ファイルに以下のように設定するだけです。
• そうです

  しかし、ページ内のリソース ファイルのリンクを自動的に

  更新
する方法はありません。 django-webpack-loader はこの問題を解決します。

• django-webpack-loader は Webpack プラグインと Django アプリケーションの 2 つの部分に分かれています。インストール方法は次のとおりです

  npm install --save-dev webpack-bundle-tracker
  pip install django-webpack-loader

  設定作業は Webpack と Django でそれぞれ行う必要があります。具体的な設定方法については、プロジェクトのホームページ（https://github.com/owais/django-webpack-loader）を参照してください。

その他の推奨事項

• WeFlowWeFlow WeFlow は、Tencent チームによって最近発表されたフロントエンド開発ワークフロー ツールです。公式 Web サイトに記載されている機能には次のものが含まれます。

Le ss -> CSS (Sass はカスタマイズ可能)
CSS Au
• top

  リフィクサープレフィックス自動補完

• 画像を自動生成

  CSS
プロパティ
• 、

  幅

  &
身長
• など.

• CSS 圧縮cssnano

CSS スプライト合成

Retina @2x および @3x は適応を自動的に生成します

🎜🎜🎜imagemin 画像圧縮🎜🎜🎜🎜JS マージ圧縮🎜 🎜🎜🎜E JS テンプレート言語🎜 🎜🎜 🎜🎜🎜デバッグ🎜とデプロイメント🎜

• ファイルの変更を監視し、ブラウザを自動的に更新します (LiveReload)

• FTP リリースの展開

• ZIP プロジェクトのパッケージ化

ソリューションの統合

• px ->レム互換適応ソリューション

• インテリジェント WebP ソリューション

• キャッシュ ファイル復元 (MD5) ソリューション

グラフィカル インターフェイスが好きな学生は、

CodeKit



を試すことができます

コードキット

で無料ツールに加えて、言及する価値のある有料ツールもあります。 CodeKit は Mac 用の定評あるフロントエンド開発補助ツールで、現在の価格は 32 米ドルです。安価ではありませんが、現在のすべてのフロントエンド スクリプトをコンパイルでき、ブラウザの自動更新をサポートし、Bower が組み込まれており、サードパーティ パッケージのインストールは 1 回のクリックで完了できると主張しています。 。グラフィカルなインターフェースで操作も非常に便利なので、お金に困っていない学生はぜひ検討してみてはいかがでしょうか。

以上が推奨されるフロントエンド自動化ツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。