ビルドツールのGulp、使ってみる
category：web
ビルドツールのGulp、Gruntよりも使い易そうなので取り入れてみました、Sass派です。
デザインもマークアップも一緒にやっているので、作業の効率化はツールの学習コストと将来性や実用性、普及具合と社内の共有なんかも考えなら取り入れています。
備忘録的な内容ですが基本を押さえたプラグインなんかも紹介できればと思います。（Mac環境）
セットアップ
まずはGulpはGruntと同様、Node.jsで走るのでNode.jsをインストールします。
インストーラでインストールしたらターミナルでバージョン確認。
node -v
確認できればインストール完了。
次はパッケージ管理、任意のディレクトリ移動します。
（デスクトップにtestフォルダ。）
cd Desktop/test
そこにパッケージ管理を置きます。
npm init
色々聞かれるので、任意の値を入れ、テストならreturnで勝手に先に進むので完了させます。
ディレクトリにpackage.jsonが作られ、後からでも変更ができます。
次にGulp.jsをインストール（グローバルインストール）
npm install gulp -g
(Mac環境でroot権限を求められたら、sudo~で入力。)
ローカルにもインストール
npm install gulp --save-dev
環境が整いました。
gulpfile.jsを用意
gulpfile.jsをpackage.jsonと同じ階層に作成し、下のように記述してgulpを呼び出し。
var gulp = require("gulp");
これで準備が整いました。
プラグインのタスク追記のルール
gulpfile.jsにプラグインのタスクを追記するルールは以下の通り。
- 変数定義
var 変数名 = require("プラグイン");- タスク定義
- gulp.task(“タスク名”,function() {});でタスクの登録。
gulp.task("タスク名",[依存タスク名],関数)- 関数定義
- gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定。
pipe(行いたい処理)でsrcで指定したファイルを処理。
gulp.dest(“出力先”)で処理を施したファイルを出力。 function() { gulp.src("入力ファイル名") .pipe(処理) .pipe(処理) ... .pipe(gulp.dest('出力ファイル名')) }- MiniMatchパターン（例：sassコンパイルのディレクトリ指定）
- sass/style.scssだけ指定
“sass/style.scss”
- sassディレクトリ直下にあるscssを指定
“sass/*.scss”
- sassディレクトリ以下にあるすべてのscssが指定
“sass/**/*.scss”
- sass/sample以下にあるscssを除くsassディレクトリ以下のscssを指定
[“sass/**/.scss”,"!sass/sample/**/*.scss]
プラグイン追加
sassのコンパイル、コンパイルされたcssの圧縮、css3ベンダープレフィックスをCan I useを元に付与、それらのファイル監視しつつLiveReload環境構築でsassとhtml保存時のブラウザへの反映も自動化し、時々手動で画像圧縮、時々手動でjavascript圧縮のプラグインとタスク記述です。
- sassコンパイル
- https://www.npmjs.com/package/gulp-sass
npm install gulp-sass --save-dev
- css圧縮
- https://www.npmjs.com/package/gulp-minify-css
npm install gulp-minify-css --save-dev
- 画像圧縮
- https://www.npmjs.com/package/gulp-imagemin
npm install gulp-imagemin --save-dev
- ベンダープレフィックス付与
- https://www.npmjs.com/package/gulp-sass
npm install gulp-autoprefixer --save-dev
- JavaScriptの圧縮
- https://www.npmjs.com/package/gulp-uglify
npm install gulp-uglify --save-dev
- LiveReload環境(browser-sync)
- https://www.npmjs.com/package/browser-sync
npm install browser-sync --save-dev
- sass記述エラー時にファイル監視を止めない
- https://www.npmjs.com/package/gulp-plumber
npm install gulp-plumber --save-dev
- HTMLをきれいに整形
- https://www.npmjs.com/package/gulp-prettify
npm install gulp-prettify --save-dev
- HTMLを圧縮
- https://www.npmjs.com/package/gulp-minify-html
npm install gulp-minify-html --save-dev
以上のプラグインをインストールしてgulpfile.jsの記述は下記の様にしています。
var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require("gulp-autoprefixer");
var uglify = require("gulp-uglify");
var browser = require("browser-sync");
var reload = browser.reload;
var plumber = require("gulp-plumber");
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var prettify = require('gulp-prettify');
var minifyHTML = require('gulp-minify-html');
//browser svnc
gulp.task("server", function() {
browser({
notify: false,
server: {
baseDir: "./"
}
});
gulp.watch('index.html', reload);
});
gulp.task("sass", function() {
gulp.src("style.scss")
.pipe(plumber())
.pipe (sass())
.pipe(autoprefixer())
.pipe(minifyCSS({keepBreaks:true}))
.pipe (gulp.dest("./"))
.pipe(browser.reload({stream:true}))
});
gulp.task("js", function() {
gulp.src("js/index.js")
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("./js/min"))
});
//watch
gulp.task("default",['server'], function() {
gulp.watch("style.scss",["sass"]);
});
//image圧縮
gulp.task('imagemin', function () {
return gulp.src('images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('/'));
});
//html整形(ネスト_インデント)
gulp.task('prettify', function() {
gulp.src('./*.html')
.pipe(prettify({indent_size: 2}))
.pipe(gulp.dest('./'))
});
//html圧縮
gulp.task('minify-html', function() {
var opts = {comments:true,spare:true};
gulp.src('./*.html')
.pipe(minifyHTML(opts))
.pipe(gulp.dest('./'))
});
記述に関して細かなところは省略しておりますが、基本は押さえたプラグインとタスクの記述です。
sassのコンパイルからのブラウザ反映のスピード感はこれだけでも十分に取り入れる価値があると思います。
他にオススメプラグインがあれば更新していきたいと思います。
0