Awesome Gulp
Gulpを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
凡例
[:no_entry:] - 非推奨の注意書き
資料
一般資料
公式ドキュメント
コミュニティ
チュートリアル
Gulp チュートリアル
- Building with Gulp
- Automate Your Tasks Easily with Gulp.js
- Gulp - The Vision, History, and Future of the Project
- Introduction to Gulp.js
- Video: Learning Gulp
- Using Gulp to Inject Scripts and Styles Tags Directly into Your HTML
- 5 Lessons Learned Using Gulp.js
- Automating Linkage: How I Learned to Stop Worrying and Love the Build
- Setting Up Gulp Tasks for the First Time
- Why You Shouldn’t Create a Gulp Plugin (or, How to Stop Worrying and Learn to Love Existing Node Packages)
- 6 Gulp Best Practices You Can Use Today to Radically Improve Your Development Experience
- Gulp for Beginners
Gulp 4 チュートリアル
- Migrating to Gulp 4 by Example
- Gulp 4: The new task execution system - gulp.parallel and gulp.series
Gulp と Browserify
Gulp と Angular
Gulp、Angular、Browserify
Gulp、Angular、Webpack
- Angular, Webpack and Gulp for an SPA: Part I
- Angular, Webpack and Gulp for an SPA: Part II
- Angular, Webpack and Gulp for an SPA: Part III
Gulp、React、Browserify
Gulp と Ember
Gulp と WordPress
その他の資料
プラグイン
コンパイル
- gulp-sass - libsass を使って Sass → CSS に変換します.
- gulp-ruby-sass - Ruby Sass を使って Sass → CSS に変換します.
- gulp-compass - Ruby Sass と Compass を使って Sass → CSS に変換します.
- gulp-less - Less → CSS.
- gulp-stylus - Stylus → CSS.
- gulp-postcss - CSS を PostCSS プロセッサで 1 回のパースでパイプします.
- gulp-coffee - Coffeescript → JavaScript.
- gulp-typescript - TypeScript → JavaScript.
- gulp-react - Facebook の React JSX テンプレート → JavaScript.
- webpack-stream - gulp との統合を便利にするために webpack をストリームとして実行します.
トランスパイル
- gulp-babel - babel を使って ES6 → ES5 に変換します.
- gulp-traceur - Traceur を使って ES6 → ES5 に変換します.
- gulp-regenerator - Regenerator を使って ES6 → ES5 に変換します.
- gulp-es6-transpiler - [:no_entry:] es6-transpiler を使って ES6 → ES5 に変換します.
- gulp-myth - Myth - 今後の CSS スペックのためのポリフィルです.
- gulp-cssnext - [:no_entry:] 今すぐ cssnext を使って、明日の CSS 文法を今日使いましょう.
結合
- gulp-concat - ファイルを連結します.
圧縮
- gulp-clean-css - CSS を clean-css で最小化します.
- gulp-csso - CSS を CSSO で最小化します.
- gulp-uglify - JavaScript を UglifyJS2 で最小化します.
- gulp-htmlmin - HTMLを html-minifier で圧縮します。
- gulp-imagemin - PNG、JPEG、GIFおよびSVG画像を imagemin で圧縮します。
- gulp-svgmin - SVGファイルをgulpで圧縮します。
最適化
- gulp-uncss - 使用されていないCSSセレクタを UnCSS で削除します。
- gulp-css-base64 - CSSファイル内のurl()宣言に含まれるすべてのリソースを、base64エンコードされたデータURI文字列に変換します。
- gulp-svg2png - SVGをPNGに変換します。
- gulp-responsive - 複数サイズの画像を生成します。
- gulp-svgstore - SVGファイルを
<symbol>要素で1つに結合します。 - gulp-iconfont - 複数のSVGアイコンからアイコンフォントを作成します。
アセットの注入
- gulp-useref - HTMLファイル内のビルドブロックをパースし、最適化されていないスクリプトやスタイルシートへの参照を置き換えます。
- gulp-inject - 各ファイルを文字列に変換し、ターゲットストリームファイル内のプレースホルダーにそれぞれの変換された文字列を挿入します。
- wiredep - Bowerの依存関係をソースコードに接続します。
テンプレート
- gulp-angular-templatecache - AngularJSテンプレートを連結し、$templateCacheに登録します。
- gulp-jade - Jade → HTML.
- gulp-handlebars - Handlebars テンプレート → JavaScript。
- gulp-hb - Handlebars テンプレート → HTML。
- gulp-nunjucks - Nunjucks テンプレート → JavaScript。
- gulp-dustjs - Dust テンプレート → JavaScript。
- gulp-riot - Riot テンプレート → JavaScript。
- gulp-markdown - Markdown → HTML。
- gulp-template - Lodash テンプレート → JavaScript
- gulp-swig - Swig テンプレート → HTML
- gulp-remark - Gulp プラグイン for remark - プラグインを活用した markdown プロセッサ
Lint
- gulp-csslint - CSS の自動 lint が CSSLint で実行
- gulp-htmlhint - HTML の検証用 HTMLHint ワッパー
- gulp-jshint - JavaScript におけるエラーおよび潜在問題を JSHint で検出
- gulp-jscs - JavaScript コードスタイルを jscs で確認
- gulp-coffeelint - CoffeeScript コードを清潔に保つためのスタイルチェックツール
- gulp-tslint - Gulp 用 TypeScript リンタープラグイン
- gulp-eslint - ECMAScript/JavaScript コード内のパターンを特定・報告
- gulp-w3cjs - HTML を w3cjs で検証
- gulp-lesshint - Less ファイルを lesshint で lint
- gulp-check-unused-css - HTML テンプレートに使われていない CSS クラスを確認
ライブリロード
- browser-sync - ウェブサイト開発時に複数のブラウザとデバイスを同期（recipes）
- gulp-livereload - Gulp 用 livereload プラグイン
キャッシュ
- gulp-changed - 変更されたファイルのみを通過
- gulp-cached - シンプルなメモリ内ファイルキャッシュ
- gulp-remember - 通過したファイルを記憶し、再利用
- gulp-newer - 新しいソースファイルのみを通過
フロー制御
- merge-stream - 複数のストリームを1つの交互配置ストリームに統合
- streamqueue - パイプに並べられたストリームを順次実行する
- run-sequence - 順次、依存するGulpタスクを実行する
- gulp-if - 条件付きでタスクを実行する
ログ
- gulp-notify - Gulp用の通知プラグイン
- gulp-size - プロジェクトのサイズを表示する
- gulp-debug - Gulpパイプラインに通されるファイルをデバッグする
- gulp-beer - インタラクティブな通知とカスタムサーバーによるより良いエラーレポート
テスト
- gulp-mocha - Mocha のテストを実行する
- gulp-jasmine - Node.jsで Jasmine 2 のテストを実行する
- gulp-protractor - Protractor のテスト用のGulpラッパー
- gulp-coverage - テストランナーに依存しないNode.js用のカバレッジレポート
- gulp-karma - Gulp用のKarmaテストランナー
- gulp-ava- Gulpで AVA のテストを実行する
その他のプラグイン
- gulp-util - 便利なユーティリティのセット
- gulp-plumber - エラーによって引き起こされるパイプの破壊を防ぐ
- gulp-load-plugins - Gulpプラグインを自動的に読み込む
- main-bower-files - ライブラリファイルを動的に取得してビルドプロセスの設定を簡略化する
- autoprefixer - Can I Use のデータを使って CSS を解析し、規則へベンダープレフィックスを追加する
- gulp-sourcemaps - ソースマップのサポートを提供する
- gulp-replace - Gulp用の文字列置換プラグイン
- gulp-rename - ファイルを簡単にリネームできます。
- gulp-rev - 静的資産のリビジョンを、ファイル名にコンテンツハッシュを付加して実行：unicorn.css → unicorn-d41d8cd98f.css。
- del - グロブを使ってファイルやフォルダを削除します。
- gulp-exec - シェルコマンドを実行します。
- gulp-strip-debug - JavaScriptコードからコンソール、アラート、デバッガーステートメントを削除します。
- gulp-cssimport - CSSファイルをパースし、インポートを検出し、リンクされたファイルの内容を取得して、インポートステートメントに置き換えます。
- gulp-inline-css - HTMLファイルのstyle属性にCSSプロパティをインラインで埋め込みます。
- gulp-gh-pages - コンテンツをGitHub Pagesに公開します。
- gulp-ng-annotate - ng-annotate を使って AngularJS の依存性注入アノテーションを追加します。
- gulp-bump - 任意のsemver JSONバージョンをアップデートします。
- gulp-file-include - gulpでファイルをインクルードします。
- gulp-zip - ファイルをZIPで圧縮します。
- gulp-git - gulpでGitコマンドを実行します。
- gulp-filter - vinylストリーム内のファイルをグロブでフィルタリングします。
- gulp-preprocess - カスタムコンテキストまたは環境設定に基づいてファイルを事前処理します。
- gulp-eval - JS式を評価またはCommonJSモジュールおよびJSONファイルをrequireします。
スキャフォールディング
ボイラープレート
- web-starter-kit - Google Web Starter Kit。
- gulp-plugin-boilerplate - gulpプラグインを作成するためのスタートアップテンプレート。
- polymer-starter-kit - ポリマーフレームワーク1.0アプリのスタート地点
- este - 同型ウェブアプリケーション向けの包括的な React／Flux 開発スタックとスターターキット。
- mnml - レスポンシブHTML5/Sassプロジェクトを開始するための最小限のテンプレート。
- kraken - フロントエンド開発者向けの軽量かつモバイル中心のベースコード
- angularjs-gulp-browserify-boilerplate - AngularJS、Sass、gulp、Browserifyを使用したベースコード
- hapi-ninja - Node.js、Hapi、Swigを用いたベースコード
- laravel-5-boilerplate - Laravel 5をベースとしたプロジェクト
- react-starterkit - Reactのスタートキット（react-router、Reflux、jest、webpack、gulp、Stylusを含む）
- gulp-front - gulp、pug、stylus、postcss、webpack、babelをベースとしたフロントエンドベースコードとモジュール化されたBEM CSSフレームワーク
- Front End Starter - Gulp、HTML5ベースコード、Sass、PostCss、Webpack（Babelのトランスパイル用）を活用したフロントエンドプロジェクト用ベースコード
Yeoman ジェネレーター
- generator-gulp-webapp - モダンなウェブアプリ向けのgulpジェネレータ
- generator-gulp-angular - AngularJSとgulpを用いたYeomanジェネレータ
- generator-react-gulp-browserify - Reactライブラリ向けのYeomanジェネレータ（gulp、Browserify、Browsersync、Bootstrapを含む）
- generator-node-gulp - gulpとMochaを含むNode.jsモジュールジェネレータ
- generator-gulp-bootstrap - Bootstrap、gulp＆libsassを用いたYeomanジェネドレータ
- generator-angulpify - AngularJS、gulpおよびBrowserifyを用いたYeomanジェネレータ
- generator-ionic-gulp - Ionicプロジェクト向けのYeomanジェネレータ（gulpを含む）
- generator-gulp-plugin-boilerplate - gulp plugin boilerplateをスケルトン化する
- generator-jekyllized - Jekyllワークフロー（gulp、Sass、AutoPrefixer、アセット最適化、キャッシュブーストなど）
その他
- elixir - Laravelアプリケーション向けのシンプルで自然なAPI（基本的なgulpタスクの定義）
- gulp-app - Gulpをアプリとして（OS X）
- lmn-gulp-tasks - gulpタスクのユニットテスト例
- gulp-chef - gulpタスクの再利用をシンプルで直感的に実現する方法
ライセンス
法律で認められる範囲において、Philipp Alferov は本作品に関するすべての著作権および関連する権利を放棄しています。