gulpも使いそうなので調べた
gulpについて
Node.jsをベースとしたビルドシステムヘルパー
様々な作業の効率化ができる
Grantとgulpの違い
Grant: タスクランナー
gulp: ビルドシステムヘルパー
タスクランナー（例：Grunt.js）
タスク＝プラグインといった感じに、その単一のタスク（プラグイン）を実行させるのが主な役割です。単一のタスクをうまいこと組み合わせて実行することで、ビルドという大きい目標に辿り着くというアプローチです。ビルドシステムヘルパー（例：gulp.js） プラグインはあくまでも入力に対して処理を行うためのものです。gulpのタスクはGruntでいうところのビルドに近いものです。タスクの中でいろいろなプラグインを組み合わせることで、タスク＝ビルドを行うといったアプローチを取っています。プラグインを容易に組み合わせられるので、柔軟なタスクを作成できるとともに、タスク同士の依存関係を極力減らすことが可能です。
記述
Grant: javascript寄り gulp: Node寄り
Grantはプラグインごとに読み込みファイルと出力ファイルを設定する必要がある。
一目でどのような処理をしているのかわかりづらいgulpじゃGrantの簡易版のようなもの、流れがわかりやすく記述が短く済む。
しかし複雑な設定にしたいとき、gulpのほうが難易度が高くなる。
Web制作の面倒事を自動化！gulpの導入から使い方まで 参照
チーム作業でのSASSで効果を発揮
チーム作業ではクオリティにムラができてしまう。
これの効率化に便利
- scssファイルをcssにコンパイルする
- めちゃめちゃに書いたスタイルの順番を整理する
- ベンダープレフィックスを必要なものに自動付与する
- レスポンシブのブレークポイントごとにコードをまとめてくれる
- コンパイルしたcssファイルをミニファイする
- 画像ファイルを追加したら自動で圧縮する
Gulp(ガルプ)で爆速コーディングしてみました 〜Gulpとは何が便利なのか編〜 参照
gulpでできること
プラグインを追加することで処理を自動化できる
（例
- Webサーバー/ライブリロード（gulp-connec）
- ライブリロードのみ（gulp-livereload）
- Sass、Compass、CoffeeScript、Jadeなどのコンパイル
- HTMLからJade,markdown,プレーンテキストに変換（gulp-html2xxxx）
- CSS中に点在したメディアクエリーをまとめる（gulp-combine-media-queries）
- CSSベンダープリフィックスの管理（gulp-autoprefixer）*指定でエラーが出るらしい
- CSSプロパティ並び順整理（gulp-csscomb）
- コードの連結（gulp-concat）
- コードの圧縮（gulp-minify-html,）
- コードの整形（gulp-prettify,）
- CSSスプライト生成
- 画像圧縮（gulp-imagemin）
- markdownをPDFに変換（gulp-markdown-pdf）
- 画像サイズ変換（gulp-image-resize）
- コード構文チェック Lint
- ファイル書き出し
- 圧縮/解凍（gulp-zip,gulp-unzip,gulp-untar）
- FTPアップロード（gulp-ftp,gulp-sftp）
- 文字コード変換
- 実体参照変換（gulp-entity-convert）
- DataURI化（gulp-base64,gulp-css-base64,gulp-data-uri）
- Bower（gulp-bower-files）
- JSON,YAML,XML,PLIST,CSV の相互変換（gulp-convert,gulp-csv2json,gulp-xml2json）
- HTMLテーブルをCSVに変換（gulp-table2csv）
- サイトマップ作成（gulp-sitemap-files）
- sitemap.xml生成（gulp-sitemap）
- 通知センターに通知（gulp-notify）
- Webページのスクリーンショット撮影（gulp-webshot）
- Angular関連
