Gulp-便利なプラグイン

Gulpは、次の表で説明するように、HTMLとCSS、JavaScript、グラフィックスなどを操作するための便利なプラグインを提供します。

HTMLおよびCSSプラグイン

Sr.No.	Plugin & Description
1	autoprefixer CSSプロパティのプレフィックスが自動的に含まれます。
2	gulp-browser-sync CSSディレクトリ内のすべてのHTMLおよびCSSファイルを監視するために使用され、ファイルが変更されるたびに、すべてのブラウザーでページへのライブリロードを実行します。
3	gulp-useref 最適化されていないスクリプトまたはスタイルシートへの参照を置き換えるために使用されます。
4	gulp-email-design CSSスタイルをインラインに変換するHTMLメールテンプレートを作成します。
5	gulp-uncss CSSファイルを最適化し、未使用および重複したスタイルを見つけます。
6	gulp-csso これはCSSオプティマイザーであり、CSSファイルを最小化してファイルサイズを小さくします。
7	gulp-htmlmin HTMLファイルを最小化します。
8	gulp-csscomb CSSのスタイルフォーマッタを作成するために使用されます。
9	gulp-csslint CSSリンターを指定します。
10	gulp-htmlhint HTMLバリデーターを指定します。

JavaScriptプラグイン

Sr.No.	Plugin & Description
1	gulp-autopolyfiller JavaScriptに必要なポリフィルを含むautoprefixerと同じです。
2	gulp-jsfmt 特定のコードスニペットの検索に使用されます。
3	gulp-jscs JavaScriptコードのスタイルを確認するために使用されます。
4	gulp-modernizr ユーザーのブラウザが提供するHTML、CSS、およびJavaScript機能を指定します。
5	gulp-express gulp express.js Webサーバーを起動します。
6	gulp-requirejs require.jsを使用して、require.js AMDモジュールを1つのファイルに結合します。
7	gulp-plato 複雑さ分析レポートを生成します。
8	gulp-complexity コードの複雑さと保守性を分析します。
9	fixmyjs JSHintの結果を修正します。
10	gulp-jscpd ソースコードのコピー/貼り付け検出器として使用されます。
11	gulp-jsonlint JSONバリデーターです。
12	gulp-uglify JavaScriptファイルを縮小します。
13	gulp-concat CSSファイルを連結します。

単体テストプラグイン

Sr.No.	Plugin & Description
1	gulp-nodeunit Gulpからノードユニットテストを実行します。
2	gulp-jasmine 出力に関連する問題を報告するために使用されます。
3	gulp-qunit QUnitテストの基本的なコンソール出力を提供し、PhantomJSノードモジュールとPhantomJSランナーQUnitプラグインを使用します。
4	gulp-mocha Mochaの薄いラッパーを指定し、Mochaテストを実行します。
5	gulp-karma Gulpでは廃止されました。

グラフィックプラグイン

Sr.No.	Plugin & Description
1	gulpicon SVGからスプライトを生成し、PNGに変換します。
2	gulp-iconfont SVGからWOFF、EOT、TTFファイルを作成するためにWebフォントで使用されます。
3	gulp-imacss 画像ファイルをデータURIに変換し、単一のCSSファイルに配置します。
4	gulp-responsive さまざまなデバイスのレスポンシブ画像を生成します
5	gulp-sharp 画像の向きと背景の変更とサイズ変更に使用されます。
6	gulp-svgstore SVGファイルを<symbol>要素を持つ1つに結合します。
7	gulp-imagemin & gulp-tinypng PNG、JPEG、GIF、SVGなどの画像の圧縮に使用されます。
8	gulp-spritesmith 画像とCSS変数のセットからスプライトシートを作成するために使用されます。

コンパイラプラグイン

Sr.No.	Plugin & Description
1	gulp-less Gulp用のLESSプラグインを提供します。
2	gulp-sass Gulp用のSASSプラグインを提供します。
3	gulp-compass Gulp用のコンパスプラグインを提供します。
4	gulp-stylus CSSでスタイラスを保持するために使用されます。
5	gulp-coffee Gulp用のcoffeescriptプラグインを提供します。
6	gulp-handlebars Gulpのハンドルバープラグインを提供します。
7	gulp-jst JSTでアンダースコアテンプレートを提供します。
8	gulp-react Facebook React JSXテンプレートをJavaScriptに指定します。
9	gulp-nunjucks JSTでNunjucksテンプレートを指定します。
10	gulp-dustjs JSTでダストテンプレートを指定します。
11	gulp-angular-templatecache templateCacheでAngularJSテンプレートを指定します。

その他のプラグイン

シニア

プラグインと説明

1

*gulp-grunt*

GulpからGruntタスクを実行します

2

*gulp-watch*

変更が行われるたびにファイルを監視します。

3

*gulp-notify*

タスクが失敗するたびにエラーメッセージを通知します。

4

*gulp-git*

Gitコマンドを使用できます。

5

*gulp-jsdoc*

Gulp用のJavaScriptドキュメントを作成します。

6

*gulp-rev*

ファイル名に静的な資産改訂を提供します。

7

*gulp-bump*

JSONパッケージのバージョンを増やします。

8

*gulp-bower-files*

バウアーパッケージの注入に使用されます。

9

*gulp-removelogs*

console.logステートメントを削除します。

10

*gulp-preprocess*

コンテキストまたは環境の構成に基づいて、HTML、JavaScript、およびその他のファイルを前処理します。

11

*gulp-duration*

Gulpタスクの期間を指定します。

12

*gulp-changedおよびgulp-newer*

変更されたファイルと新しいファイルを実行します。

13

*gulp-connect*

LiveReloadでWebサーバーを実行するために使用されます。

14

*gulp-shell*

シェルコマンドを実行します。

15

*gulp-ssh*

SSHおよびSFTPタスクを使用して接続します。

16

*gulp-zip*

ファイルとフォルダーを圧縮します。

17

gulp-cleanおよびgulp-copy

gulp-cleanプラグインはファイルとフォルダーを削除し、gulp-copyプラグインはソースから新しい宛先にファイルをコピーします。

18

*gulp-filesize*

人間が読める形式でファイルサイズを指定します。

19

*gulp-util*

gulpプラグインのユーティリティを提供します。

Gulp-useful-plugins