GruntからGulpに乗り換えて、3年くらい経つだろうか。
サイトを新規で作るたびに、Gulpをインストールしている。
毎回インストールしなくてもコピペで再利用できるが、サイトを新規で作るたびに最新のバージョンで作りたいこともあり、あえて新規でインストールするようにしている。
自分的なインストール手順の備忘録。
node -v
* Nodeがインストールしていない場合は、http://nodejs.org/ からダウンロードする。
cd {gulpをセットしたいディレクトリ（gulpがあるディレクトリ）}
npm init
sudo npm install gulp -g
sudo npm install --save-dev gulp
sudo npm install --save-dev gulp-uglify gulp-concat gulp-rename gulp-plumber gulp-cssmin gulp.spritesmith gulp-autoprefixer gulp-postcss css-mqpacker browser-sync
sudo npm install --save-dev gulp-sass --unsafe-perm=true --allow-root
これをインストールしておけば、ざっくり、こんなことが自動でできます。
- 複数のSASSファイルを一ファイルにまとめ、CSSに変換して圧縮する
- CSSプロパティは、プリフィックスでの記述を自動で生成する
- CSSのメディアクエリーを整理する
- 複数のJSファイルを一ファイルにまとめ、難読化する
- CSSやJavaScriptの記述にエラーがある場合、エラー個所を表示する
- ファイルが更新されたらブラウザも自動更新する