作業時間を20%短縮！gulpの便利なプラグイン・タスクまとめ

2017年7月7日

こんにちは！

デザイナーの伊東です。
前回、前々回とデザインの概念的な部分を記事の題材としていましたが、ここら辺で技術的なお話、それもデザインではなくコーディングのことについて書こうと思います。

最近、業務でgulpを頻繁に使用するようになりました。
gulpとは、画像の圧縮やsassのコンパイル、ftpアップロードなどの細々した作業を自動化してくれる、タスクランナーと呼ばれるものの一つです。gulpの他にはGruntなんかもよく耳にします。

以前から存在を知ってはいたもののなかなか手をつけずにいましたが、一旦使ってみるとその便利さに以前の作業環境がだいぶ不便に感じます。
まだまだ試していない機能もたくさんありますが、今回はgulpの便利なプラグイン・タスクをまとめてみましたのでご覧ください。

この記事の目次

1 ブラウザを自動でリロード！　[browser-sync]
2 爆速でsassをコンパイル！　[gulp-sass]
3 コマンド一つでCSSのlintチェック！　[gulp-csslint]
4 ベンダープレフィックスを自動付与！　[gulp-autoprefixer]
5 自動で画像圧縮！　[gulp-imagemin]

ブラウザを自動でリロード！　[browser-sync]

エディタでファイルを保存して、ブラウザに移動して、リロードして、、、
これだけで2,3秒かかっていた作業が、browser-syncなら一瞬です。
htmlでもcssでも、保存した瞬間にブラウザを勝手にリロードしてくれます。
たったそれだけのことですが、実際に使ってみると驚くほど快適です。

gulpでは、このbrowser-syncもタスクとして監視することができます。

npm install -g browser-sync

1	npm install -g browser-sync

var gulp = require('gulp');
var browserSync =require('browser-sync');

gulp.task('default', ['browser-sync']);


gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "./htdocs/"       //対象となるディレクトリ
            ,index  : "index.html"      //インデックスファイル
        }
    });
});

//
//ブラウザリロード
//
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//
//監視するファイル
//
gulp.task('default', ['browser-sync'], function () {
    gulp.watch("./htdocs/*.html",            ['bs-reload']);
    gulp.watch("./htdocs/src/css/*.css", ['bs-reload']);
    gulp.watch("./htdocs/src/js/*.js",   ['bs-reload']);
});

var gulp = require('gulp');

var browserSync =require('browser-sync');

gulp.task('default', ['browser-sync']);

gulp.task('browser-sync', function() {

browserSync({

server: {

baseDir: "./htdocs/" //対象となるディレクトリ

,index : "index.html" //インデックスファイル

}

});

//ブラウザリロード

gulp.task('bs-reload', function () {

browserSync.reload();

});

//監視するファイル

gulp.task('default', ['browser-sync'], function () {

gulp.watch("./htdocs/*.html", ['bs-reload']);

gulp.watch("./htdocs/src/css/*.css", ['bs-reload']);

gulp.watch("./htdocs/src/js/*.js", ['bs-reload']);

});

爆速でsassをコンパイル！　[gulp-sass]

sassのコンパイルをgulpで行うことができます。
gulpを使う前はcompassでコンパイルしていましたが、コンパイルにかかる時間が体感的にだいぶ早くなったのを感じています。
compassでのコンパイルは2秒程待ち時間がありましたが、gulp-sassでは1秒もかかっていません。小さい差に思われるかもしれませんが、積み重ねていくと大きな作業時間短縮につながります。

npm install gulp-sass --save-dev

1	npm install gulp-sass --save-dev

var gulp = require('gulp');
var sass = require('gulp-sass');

// 保存先の指定
gulp.task('sass', function(){
  gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css/'));
});

//自動監視のタスク
gulp.task('sass-watch', ['sass'], function()
  var watcher = gulp.watch('./sass/**/*.scss', ['sass']);
  watcher.on('change', function(event) {
  });
});

gulp.task('default', ['sass-watch']);

var gulp = require('gulp');

var sass = require('gulp-sass');

// 保存先の指定

gulp.task('sass', function(){

gulp.src('./sass/**/*.scss')

.pipe(sass({outputStyle: 'expanded'}))

.pipe(gulp.dest('./css/'));

});

//自動監視のタスク

gulp.task('sass-watch', ['sass'], function()

var watcher = gulp.watch('./sass/**/*.scss', ['sass']);

watcher.on('change', function(event) {

});

gulp.task('default', ['sass-watch']);

コマンド一つでCSSのlintチェック！　[gulp-csslint]

cssをlintチェックにかけることもgulpでは可能です。
いちいちlintのサイトに移動して、urlを入力する手間も必要ありません。

npm install --save-dev gulp-csslint

1	npm install --save-dev gulp-csslint

var csslint = require('gulp-csslint');
gulp.task('css', function() {
	gulp.src('css/*.css')
		.pipe(csslint())
		.pipe(csslint.reporter());
});

var csslint = require('gulp-csslint');

gulp.task('css', function() {

gulp.src('css/*.css')

.pipe(csslint())

.pipe(csslint.reporter());

});

ベンダープレフィックスを自動付与！　[gulp-autoprefixer]

プロパティごとにサポートがまちまちで、確認するのも面倒なベンダープレフィックスを、自動でつけてくれる優れものです。
つけ忘れによる表示崩れなども未然に防げるのも魅力ですね。

npm install -D gulp-autoprefixer

1	npm install -D gulp-autoprefixer

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('compile-css', function () {
    return gulp.src(['src/css/*.css'])
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        }))
        .pipe(gulp.dest('static/css'));
});

var gulp = require('gulp');

var autoprefixer = require('gulp-autoprefixer');

gulp.task('compile-css', function () {

return gulp.src(['src/css/*.css'])

.pipe(autoprefixer({

browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],

cascade: false

}))

.pipe(gulp.dest('static/css'));

});

自動で画像圧縮！　[gulp-imagemin]

Googleのサイトスピード計測ツールPageSpeed Insightsで表示速度を計ると、大抵指摘されるのが画像サイズの最適化。
ちまちま画像に圧縮をかけるのは面倒ですが、imageminを使用すれば自動で画像を圧縮することができます。

npm install --save-dev gulp-imagemin

1	npm install --save-dev gulp-imagemin

gulp.task('imagemin', function(){
  return gulp.src('src/images/*')
    .pipe(imagemin(
      [
        pngquant()
      ],
      {
        interlaced: true,
        progressive: true,
        optimizationLevel: 5
      }
     ))
     .pipe(gulp.dest('dist/images'));
});