WEB掻っ穿じり

WEB備忘録とチャリとカメラ

ビルドツールのGulp、使ってみる

  category:web

Gulp イメージ

ビルドツールのGulp、Gruntよりも使い易そうなので取り入れてみました、Sass派です。

デザインもマークアップも一緒にやっているので、作業の効率化はツールの学習コストと将来性や実用性、普及具合と社内の共有なんかも考えなら取り入れています。

備忘録的な内容ですが基本を押さえたプラグインなんかも紹介できればと思います。(Mac環境)

セットアップ

まずはGulpはGruntと同様、Node.jsで走るのでNode.jsをインストールします。

//nodejs.org/

インストーラでインストールしたらターミナルでバージョン確認。

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のコンパイルからのブラウザ反映のスピード感はこれだけでも十分に取り入れる価値があると思います。
他にオススメプラグインがあれば更新していきたいと思います。