English / 日本語
スタイルシート ｜ JavaScript ｜ Webパフォーマンス ｜ 自動化 ｜ 開発サーバ
**Sass**はCSSの拡張言語で、効率的にスタイルシートを作成できます。
もともとSassはRubyで書かれていましたが、rff-gulpではSassのポータブル版エンジンLibSassを使っているため、Rubyをインストールする必要はありません。
**stylelintは、記述の一貫性を保ちスタイルのエラーを防ぐための、モダンなCSS用リントです。
Stylelintにはシェアラブル・コンフィグという機能があり、rff-gulpではstylelint-config-standard**をデフォルトのルールとして採用しています。
**Autoprefixer**はCSSを解析し、Can I Useのデータに基づいてベンダープリフィックスを自動的に付加します。
-webkit-*, -moz-*, -ms-*といった記述をコーディング時に意識する必要がなくなります。
**ESLintはJavaScriptとJSX用のカスタマイズ性の高いリントです。
ESLintもシェアラブル・コンフィグに対応しており、rff-gulpではeslint-config-xo-space**をベースにしたルールを使っています。
**Browserify**は、require('modules')記法による依存解決をブラウザ用のスクリプトでも使えるようにするツールです。
スクリプトをモジュール化したり、npmで提供されたライブラリを簡単に組み込むことができます。
HTML/CSS/JSファイルは、ビルドタスクによって自動的に最小化・最適化されます。
rff-gulpでは最小化のエンジンとして**html-minifier、cssnano、UglifyJS**を使っています。
ビルド時にPNG、JPEG、GIF、SVG画像は**imagemin**を使って最適化されます。
ビルドすると、アセットのファイル名には内容に基づいたハッシュが付加されます。例: main.css→main-9429bd756b.css
rff-gulpでは**gulp-revとgulp-rev-replace**を使ってこの機能を実装しています。
"app/images/_sprites"フォルダ内の画像は自動的にCSSスプライトへと変換されます。
スプライトの生成には**spritesmithのラッパーであるgulp.spritesmith**を使っています。
"app/fonts/_glyphs"フォルダ内のSVGアイコンは自動的にWebフォントとCSSに変換されます。
アイコンフォントの生成には、**gulp-iconfontとgulp-iconfont-css**を使っています。
ビルドされたファイルは、コマンド1つでデプロイ用ブランチに転送することができます。
**gulp-gh-pages**を使って実装しています。
**Browsersync**は、複数のブラウザ・デバイスを同期して表示させることができる開発用のWebサーバです。
Browsersyncには他にも、ライブリロード、入力や操作内容の同期、ネットワーク速度のシミュレーションなど、便利な機能がたくさん含まれています。