検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >推奨されるフロントエンド自動化ツール

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

PHPz
PHPzオリジナル
2017-04-04 14:14:291271ブラウズ

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

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 プラグイン。

CSS スプライト合成

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

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

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

    • FTP リリースの展開

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

  • ソリューションの統合

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

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

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

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

    CodeKit

    

    を試すことができます

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

    コードキット

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

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

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：HTML5 でローカル画像をアップロードする際のさまざまな問題次の記事：HTML5 でローカル画像をアップロードする際のさまざまな問題

    関連記事

    続きを見る