最重要指名手配のプラグイン

すべての人に良い一日を！ 賢い人、Habréのどの記事を覚えていないのか、最近、自動化できるすべてのものを自動化する明示的な呼び出しで開発プロセスについて考えたばかりです。 そして、プロジェクト全体で後で自動化するために、一度自動化に時間を費やすことをお勧めします。



Web開発者には、Gruntと呼ばれる大量のタスクを自動化するための優れたツールがあります。 そして、分類法に対する私の情熱は、このコレクターのために100近くの貴重なプラグインの膨大なコレクションをまとめることを余儀なくされました。 Gruntを既に使用している人の多くは自分で何かを見つけ、そうでない人は可能性を見て、それをインストールしてこの仕組みがどのように機能するかを理解する良いモチベーションを得ます。



誰もがコレクションに追加できるように、 GitHubにもセレクションを投稿しました 。

HTMLとCSS

autoprefixerは、 カヌー統計に基づいてCSSプロパティに自動的にプレフィックスを付ける最も便利なプラグインの1つです。 AutoPrefixerは、Evil MartiansのPostCSSプロジェクトのフレームワーク内の多くのアドオンの1つにすぎない、と言うことが重要です。



grunt-browser-syncは、おそらくWeb開発者の生産性を向上させるという点で最も便利なツールです。 BrowserSyncは接続を作成し、その後クライアントまたはサーバーファイルだけでなく、すべてのデバイスのすべてのブラウザーでページを自動的に更新します。 さらに、スクロール位置とフォームの完成したデータを同期します。



grunt-html-buildはユニバーサルレイアウトアシスタントです。 プラグインは、ソースファイルを結合し、HTMLの完全なテンプレート/ブロックを作成できます。 それでも同様のタスクでは、 grunt-include-replaceは非常に優れています。



grunt-email-designは、すべてのCSSスタイルをインラインスタイルに変換し、ファイルへのすべてのパスを自動的に変更し、オプションで画像をCDNにアップロードしたり、手紙を電子メールに送信したりする方法を知っている、文字をタイプセットするための貴重なツールです。 別のgrunt-email-boilerplateもあります。



grunt-uncssとgrunt-ucssは、同時にCSSファイルを最適化するための2つの最適なソリューションです。 どちらのプラグインもHTMLコードを解析し、未使用のスタイルと複製されたスタイルをすべて検出します。 2番目のプロジェクトはOpera Softwareチームによるものです。



grunt-revizorは、CSSを縮小するだけでなく、HTML、CSS、およびJavaScriptファイル内のすべてのクラスの名前を短縮する非常にクールなコンプレッサーです。 今日、多くのCSSコンプレッサーとそれらの比較表 （ GitHub ）があります。 しかし最近、Gruntのない最高の速記ユーティリティを見ました。

a { font-family: Arial; font-style: italic; font-size: 14px; line-height: 18px; font-weight: bold; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

=>

 a { font: italic 700 14px/18px Arial; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

grunt-contrib-htmlminはシンプルなHTMLミニファイヤです。



grunt-penthouseとgrunt-criticalcss-プロジェクトのクリティカルパスを自動的に見つけます。 パフォーマンスに関する重要なポイント。これについては、 ここで詳しく説明します 。



grunt-csscomb -CSSの構造を高貴にします。 スタイルガイドを生成するための、 うっとうしいスタイルガイドがまだあります。



grunt-contrib-csslint -CSSリンター。



grunt-html -W3Cバリデーターに基づくHTMLバリデーター。

Javascript

grunt- autopolyfillerは、Autoprefixerに似た非常にクールなプラグインであり、JavaScriptに必要なすべての親友をピックアップして、今日の最新のECMAScript標準を使用できるようにします。 ES6 / ES7をES5に変換するgrunt-babelもお勧めします。



grunt-jsfmtは、Rdioチームが提供する最も有用なJavaScriptプラグインであり、特定のフラグメントを検索し、コードをフォーマットし、大幅に変更することができます。 grunt-jsbeautifierもあります。



grunt-jscs -JavaScriptコードスタイル。 jQuery、Yandex、Google、Airbnbなどの既存のスタイルガイドに対してコードをチェックするための多くの構成を備えた素晴らしいツール。



grunt-modernizr-ブラウザーの機能に応じて、Modernizr.jsに基づいてプロジェクトの正しいアーキテクチャを作成するのに役立ちます。



grunt-express -Express.js Webサーバーを起動します。



grunt-contrib-requirejsとgrunt-browserify -RequireJSとBrowserifyをそれぞれ最適化します。



grunt-shipit-Shipitでデプロイを自動化します 。



grunt-plato-美しいグラフの形でさまざまなメトリックを使用してコードの分析を提供します。



grunt-complexity -HalsteadおよびCyclomaticアルゴリズムに基づくコード品質チェック。



fixmyjs - JSHint （ grunt-contrib-jshint ）に基づいてlintが実行された後、コード内の単純なエラーを自動的に修正します。



grunt-jscpd-コード内の重複を見つけます。



grunt-jsonlintおよびgrunt-yamllintは、JSONおよびYAMLファイルのバリデーターです。



grunt-contrib-uglify -JavaScriptコンプレッサー。



grunt-contrib-concat-ファイル連結。

単体テスト

• grunt-contrib-nodeunit
• グラント・コントリブ・ジャスミン
• うなり声-contrib-qunit
• グラントモカ
• うめきカルマ

グラフィックス

grunticonは、SVGからスプライトを生成し、それらをPNGに変換し、すべてのデータURIを記述し、ブラウザーの機能に応じて目的の形式に接続できる貴重なプラグインです。



grunt-webfontは、Webフォントを操作するための優れたプラグインです。 SVGからWOFF、WOFF2、EOT、TTFファイルを作成できます。 Mac、Windows、Linuxで動作します。 あらゆるバリエーションのデモページに結果を反映します。CSS/ Sass / LESS / Stylus、ブートストラップまたはBEMスタイル、合字とデータURI。



grunt-responsive-imagesは、必要なデバイス解像度に対応するアダプティブイメージを、名前に対応するプレフィックスを付けて生成する簡単な方法です。 grunt-responsive-images-extenderも同じことをsrcset



ますが、セレクターを選択してsrcset



書き込みます。



grunt-sharpは、JPEG、PNG、WebP、およびTIFF画像を操作するための最速のモジュールです。 プラグインは、サイズ、方向、背景、アルファチャネルなどを変更できます。



grunt-svgstore-含まれているすべてのSVGファイルを結合し、将来使用するために<symbol>



としてHTMLに書き込みます。



imacssは、CSSに接続されているPNG、JPG、SVG画像をデータURIに自動的に変換する非常に便利なユーティリティです。



画像圧縮用のgrunt-contrib-imagemin 、 grunt-imageoptimおよびgrunt-tinypng 。



grunt-spritesmith-自動スプライト生成。

その他

アセンブル -このプラグインは、Node.js、Grunt.js、およびYeoman用の静的サイトの全体的なジェネレーターであり、Handlebarsテンプレートエンジンを備えています。 Zurb Foundation、Zurb Ink、H5BP / Effeckt、Less.js / lesscss.org、Topcoat、Web Experience Toolkitなどのプロジェクトで使用されます。



jit-grunt -JIT（Just In Time）ローダー。 一部の開発者は、Gruntを多くの接続されたファイルで長い間作業していると批判しています。 ところで、このためにGulpが登場しましたが、このプラグインはパフォーマンスの問題を完全に解決します。 また、同じ目的のために設計されたgrunt-concurrentと 、GruntのGulpプラグインを実行できるgrunt-gulpについても言及したいと思います。



grunt-contrib-watchは、Gruntプラグインシステムの基礎です。 指定されたすべてのファイルまたはディレクトリ全体を監視し、変更があった場合は、構成で説明されているタスクを実行します。



grunt-notify -Gruntを構築するときにシステムメッセージの形式でエラーを表示します。最も重要なことは、異なるオペレーティングシステムで機能することです。



grunt-git - gitコマンドを使用できます。



grunt-githooks - Git HooksをGruntタスクにバインドします 。



grunt-gitbook-素晴らしいGitBookユーティリティを使用してドキュメントを作成します。



grunt-jsdocは、 JSDoc3に基づくドキュメントジェネレーターです。



grunt-revは、リビジョンを操作するための便利なプラグインです。



grunt-releaseおよびgrunt-version-プロジェクトのバージョンを管理できます。



grunt-conventional-changelog -Gitのコミットに基づいて変更のリストを生成します。 また、同じ方法でリポジトリを監視し、package.jsonとgrunt-dev-updateを更新してパッケージ自体を更新するgrunt-bumpがあります。



grunt-wiredep-必要なすべてのBowerコンポーネントを接続します。



grunt-remove-logging-ログを自動的に削除します。



grunt-proxyおよびgrunt-connect-proxy-開発中のプロキシAPI呼び出しのサポートを接続します。



grunt-phantomasは、プロジェクトのパフォーマンスを測定するための優れたツールです。



grunt-preprocessは、インストールされた構成を参照するプリプロセッサです。



time-grunt-タスクの実行時間を表示します。



load-grunt-config-さまざまな分類群の構成ファイルを分割できるライブラリ。



grunt-newer-変更されたファイルに対してのみタスクを起動します。



grunt-open-指定されたオプションに応じてURLとファイルを開きます。



grunt-contrib-connectは、静的サイト用のシンプルなWebサーバーです。



grunt-execおよびgrunt-shell-シェルコマンドを実行できます。



grunt-ssh -SSHおよびSFTP経由で接続する機能を提供します。



grunt-contrib-compress-フォルダーとファイルをアーカイブします。



grunt-contrib-cleanおよびgrunt-contrib-copy-指定されたソースをそれぞれ削除してコピーします。



grunt-usebanner-ソースファイルとgrunt-figletにバナー（著作権またはASCIIヘッダー）を追加して、これを使用できるようにします。



grunt-file-info-ファイルのサイズとバージョンを読みやすい形式で表示します。

コンパイラー

grunt-contrib-less -CSSのレス。

grunt-contrib-sassおよびgrunt-sass -CSSのSASS / SCSS。

grunt-contrib-compass -CSSのコンパス付きSASS。

grunt-contrib-stylus -CSSのスタイラス。

grunt-contrib-coffee -JavaScriptのCoffeeScript。

grunt-contrib-jade -HTMLのヒスイ 。

grunt-contrib-handlebars- JSTのハンドルバーテンプレート。

grunt-contrib-jst -JSTのアンダースコアテンプレート。

grunt-react -JSTのFacebook ReactのJSXテンプレート。

grunt-nunjucks -JSTのNunjucksテンプレート。

grunt-dustjs -JSTのダストテンプレート。

grunt-html2js -JSTのAngularJSテンプレート。

最後に

psi-レポート付きのPageSpeed Insights。

tmi -TMI（Too Many Images）-ウェブ上で画像の重みを発見します。

ngrok-ローカルホストへのイントロスペクトされたトンネル。

pageresは、さまざまな解像度でサイトのスクリーンショットを作成するための便利なユーティリティです。

おそらく、いくつかの自動化メソッドは、エディターで直接使用する方が便利です-SublimeTextのベストプラグイン 。

matchdep-依存関係を正しく記述するのに役立ちます。