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

この投稿は、以前のコレクション「Gruntに最も必要なプラグイン」の複製であると言えます 。 実際、何時間もの検索を行った後、Gulp用のクールなプラグインは見つかりませんでした。これは、Grunt用ではなく、いくつかの非常に特殊なユーティリティを除きます。 それは正反対ですが、多くのGulpユーザーを無視することはできませんでした。 GulpはGruntからもGruntからもGruntから使用できるため、不足しているすべてのプラグインをハイライトしました。



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



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



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

HTMLとCSS

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



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



gulp-useref-特定のブロックを解析し、それらに記述されているスタイルとスクリプトを連結します。



gulp-email-designは、すべてのCSSスタイルをインラインスタイルに変換し、ファイルへのすべてのパスを自動的に変更し、オプションで画像をCDNにアップロードしたり、手紙を電子メールに送信したりする、文字を組版するための貴重なツールです。



gulp-uncssは、CSSファイルを最適化するための最適なソリューションです。 プラグインはHTMLコードを分析し、すべての未使用および重複スタイルを見つけます。



gulp-cssoは優れたCSSミニファイヤです。 今日、多くのCSSコンプレッサーとそれらの比較表（GitHub）があります。 しかし最近、Gulpのない最高の速記ユーティリティを見つけました。

a { font-family: Arial; font-style: italic; font-size: 14px; line-height: 18px; font-weight: bold; background-image: url('example.png'); background-color: red; background-size: cover; background-repeat: no-repeat; } => a { font: italic bold 14px/18px Arial; background: red url('example.png') no-repeat / cover; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



gulp-csscomb -CSSの構造を高貴にします。



gulp-csslint -CSSリンター。



gulp-htmlhint -HTMLバリデーター。

Javascript

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



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



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



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



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



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



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



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



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



gulp-jscpd-コード内の重複を検索します。



gulp-jsonlint -JSONファイル検証ツール 。



gulp-uglify -JavaScriptコンプレッサー。



gulp-concat-ファイル連結。

単体テスト

• gulp-nodeunit
• ガルプジャスミン
• gulp-qunit
• ガルプモカ
• ガルプカルマ

グラフィックス

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



gulp-iconfontは、Webフォントを操作するための優れたプラグインです。 SVGからWOFF、WOFF2、EOT、TTFファイルを作成できます。



gulp-responsiveは、名前に適切なプレフィックスを使用して、必要なデバイス解像度のレスポンシブイメージを生成する簡単な方法です。



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



gulp-svgstore-接続されているすべてのSVGファイルをマージし、さらに使用するために<symbol>



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



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



画像圧縮用のgulp-imageminおよびgulp -tinypng 。



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

その他

gulp-grunt-Gulpの Gruntプラグインを実行できます。

不足しているもの：

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



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



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



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



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



grunt-conventional-changelog -Gitのコミットに基づいて変更のリストを生成します。



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



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



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

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



gulp-notify -Gulpをシステムメッセージの形式でビルドするときにエラーを表示します。最も重要なのは、さまざまなオペレーティングシステムで機能するものです。



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



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



gulp-revは便利なリビジョンプラグインです。



gulp-release-プロジェクトのバージョンを制御できます。



gulp-bump-リポジトリを監視し、package.jsonとgulp-updateを更新し、パッケージ自体を更新します。



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



gulp-removelogs-ログを自動的に削除します。



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



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



gulp-changedおよびgulp-newer-変更されたファイルに対してのみタスクを実行します。



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



gulp-shell-シェルコマンドを実行できます。



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



gulp-zip-フォルダーとファイルをアーカイブします。



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



gulp-filesize-ファイルサイズを読み取り可能な形式で表示します。



gulp-util -Gulpプラグインを開発するためのさまざまなユーティリティ。

コンパイラー

gulp-less -CSSのレス。

gulp-sass -CSSのSASS / SCSS。

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

gulp-stylus -CSSのスタイラス。

gulp-coffee -JavaScriptのCoffeeScript。

gulp-jade -HTMLの玉。

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

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

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

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

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

gulp-angular-templatecache -JSTのAngularJSテンプレート。

最後に

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

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

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

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

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

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