Gulpプラグイン(Sass関連)
2019年7月現在、npmに公開されているSass関連のGulpプラグイン48種を集めました。
Sassでのデザインを少しでも自動化し、正確かつ早いコーディングを実現したいと考えたことが収集の理由です。
3年以上更新のないプラグインや、非推奨となったもの、GitHubが非公開となっているものは除いています。また、翻訳に関しては直訳した文章を載せているため、一部その用途が読みづらい箇所があります。
この点は追々修正を加えていき、使用頻度や人気の安定したプラグインに絞り込んでいく予定です。
見出しをクリックすると、各プラグインのページに飛びます。
gulp-json-data-to-sass
JSONファイルの入力を受け取り、SCSS変数を出力するGulpプラグイン。
フォントや背景のカラー、幅や高さなど使い回したいプロパティと値をJSONファイル化しておくことで、Sassに何度も記述する手間が省けます。タイプミスによる時間のロスも減るため便利。
gulp-scss-lint
.scssファイルを scss-lintで検証します。
エラー数とその箇所を表示してくれるため、Sassファイル上を目視でチェックする手間が省けます。
gulp-shopify-sass
@importの順序で定義されたSassファイルを連結する。
gulp-style-aliases
@aliasルールを使用してCSS、less、およびSASSプロパティのカスタムエイリアスを作成できるGulpプラグイン。
gulp-cssdepth-check
最大CSS深度をチェックするためのGulpプラグイン。
gulp-rn-css
scss / sass / css / lessファイルをjavascriptオブジェクトに変換するためのgulpプラグイン。
gulp-sass-glob
sass / scssファイルでglobインポートを使用するためのタスクを作成します。
gulp-sass-import-once
Sassファイル間で重複しているインポートを再帰的に削除します。
gulp-sass-pedigree
Incremental Caching System for Gulp and NodeSass
GulpとNodeSassのためのインクリメンタルキャッシングシステム。
gulp-sass-variables
Sass変数をgulpストリームに追加して、Sassビルドプロセスで例えば環境変数を使用できるようにします。文字列、数字、およびブール値をサポートします。
gulp-sass-vars
sassファイルに変数を挿入する。
gulp-sass-vars-to-js
Sass変数をJavaScriptにエクスポート。
gulp-sassvg
SVGファイルを取得し、それらをsass-mixinに変換します。これは後で変更された（例えば色付けされた）背景画像を作成するために使用されます。
ho-vom-til
ho-vom-tilは、ほとんどすべてのSSHクライアントのターミナルウィンドウ内で使用できるいくつかの楽しいツールを可能にします。
m2-sass-inlinesvg
svgファイルをsass関数に変換し、それをbackground-imageのインラインsvgとして使用できるようにします。 gulp-sassvgに基づきます。
gulp-sass-inline-svg
svgファイルをsass関数に変換し、それをbackground-imageのインラインsvgとして使用できるようにします。 gulp-sassvgに基づきます。
organizze-gulp-sass-bulk-import
SCSSにディレクトリをインポートする。
gulp-svg-inline-scss
svgファイルをsass関数に変換し、それをbackground-imageのインラインsvgとして使用できるようにします。 gulp-sassvgに基づきます。
@dietechniker/gulp-sass-dependency-tracker
安全なコンパイルを最適化するNodeJS gulpパッケージ - 実際に変更したものだけをコンパイルします。
@spomni/gulp-dart-sass
Sass用のGulpプラグイン。
aun-gulp-sass
Ruby Sassを使用してSassをCSSにコンパイルします。
gulp-angular2-embed-sass
sassからcssまでのstyleUrlsをコンパイルし、それらをstyleの下のストリングとして含めるためのgulpプラグイン。
gulp-better-sass-inheritance
変更されたsass / scssファイルとその依存関係（拡張、インクルード、またはインポート）のみを再コンパイルします。
gulp-bmn-sass
目的のためのsassのためのGulpプラグイン。
gulp-css-critical
クリティカルCSSのためのGulp。
※クリティカルCSSとは
CSSにおけるブラウザ表示パフォーマンスのTipsを指す。
導入することでレンダリングブロックを回避し、ファーストビューの表示を高速化。
これにより、ページ表示の体感速度が上がる。
ただし、ページ全体の読み込み速度はほぼ変わらず、あくまでファーストビュー表示高速化のための施策。
参考：クリティカルCSSとは
gulp-css-preprocessor
ファイル拡張子に基づくgulp用の少ない/ Scss / Sass / Stylusプラグイン。
gulp-css-spriter
CSSソースファイルからのスプライトシートの生成。
gulp-css-spriter-dookay
Gulp-css-spriter-dookay、スプライトマップ処理プラグイン。
gulp-css-spriterプラグインに基づいて、画像をマージする必要があるかどうかをフィルタリングするために新しい設定項目matchRegが追加されました。
gulp-css-spriter-filter
gulp-css-spriterからフィルタを追加して、結合したい画像を除外できるようにします。
gulp-css-spriter-param
gulp-css-spriterに基づいて変更され、スプライトを処理するために特定のパラメータ（？__ sprite）を追加します。
gulp-css-spriter-xx
gulp-css-spriterはgulpプラグインで、パイプインしたCSSを調べて背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。
gulp-css-spriterm
gulp-css-spritermは、gulpプラグインで、パイプインしたCSSを調べて背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。
gulp-dart-sass
Dart Sassコンパイラを使用したGulp用のSassプラグイン。
gulp-happiness-scss
happiness-scssのためのGulpプラグイン。
gulp-iconfont-sass
Gulpを使ってフォントからCSSを作成します。
gulp-js-sass
完全なnodejs dockerコンテナにデプロイするためにnode-sass / pythonなしでscssをコンパイルするために使用されるgulpモジュール。
gulp-polymer-sass
Polymer要素内に含まれているSCSSコードをコンパイルします。
gulp-sass
Gulp用のSassプラグイン。
gulp-sass-cdn
gulp-sass cdnは、gulp-sass npmパッケージ用の高速でグローバルなコンテンツ配信ネットワーク（cdn）です。
gulp-sass-export
sass-export用のgulpプラグイン
gulp-sass-image
node-sass環境にコンパスのような画像機能を提供するためのgulpプラグイン。
gulp-sass-inheritance
変更されたsass / scssファイルとそのすべての依存関係のみを再構築します。
gulp-sass-inheritance-plus
sass / scssファイルを、それらのファイルを拡張またはインクルードした他のファイルと一緒に再構築する。
gulp-sass-inject
パイプラインにsass変数を注入するためのGulp拡張。
gulp-sass-lint
Sass Lint用のGulpプラグイン。
gulp-sass-monster
Gulp plugin for node-sass with steroids. The project is a revised version of gulp-sass and updated gulp-sass-extended
ステロイド(?)を使ったnode-sass用のGulpプラグイン。
このプロジェクトはgulp-sassの改訂版とgulp-sass-extendedの更新版です。
gulp-sass-partials-imported
scssパーシャルファイルを処理し、それらをインポートするファイルをパイプに追加します。
gulp-sass-unicode
sassコンパイル後に 'content' Unicodeを置き換える。
gulp-scss-dom
HTML要素でのSCSS機能の使用
gulp-spriter-inline
gulp-spriter-inlineはパイプインするCSSを調べて、URLに '？__ spriter'が含まれている背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。
gulp-svg-sprite
SVGスプライトとスタックが豊富 - svg-spriteをラップしてSVGファイルの束を読み込んで最適化し、さまざまな種類のSVGスプライトとCSSリソースを作成するGulpプラグイン。
gulp-watch-sass
SASSファイルを監視し、@ import-ingファイルをストリームに追加します。
lip-ret-xur
lip-ret-xurは、スクリプトを整理し、サーバーのリソース使用量を最小限に抑え、サーバー上のデータを取得し、端末に目覚まし時計を提供するツールです。
starcor-gulp-css-spriter
gulpプラグインのstarcor-gulp-css-spriterは、パイプインしたCSSを調べて、背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。