前置き

1, 2年おきくらいにティザーサイトを作る話が出てくるので、 gulpを使って効率よく実装するときの導入メモ。

作ったのは2ページなので、感覚的には「とりあえずscssが使えたら良い」くらいの気持ちで入れています。

(Node.jsが必要なので事前にインストール)

導入手順

1. npmでgulpをインストール

ターミナルから

npm install -g gulp

gulpをグローバルインストールするので、既に実行している場合は入れなくて良い。入ってるかどうかは

gulp -v

で確認できる。

2. よさげなプラグインを追加する

gulp-sass

まずはsassを使えるようにする。

npm install --save-dev gulp-sass

browser-sync

sassやhtmlファイルに変更があった場合に、自動でブラウザを更新してくれる。

npm install --save-dev browser-sync

gulp-notify

sassのコンパイルで失敗したときなどにエラーをデスクトップ通知を出してくれる。 ;をうっかり付け忘れて保存するとき多いのでこれはありがたい。

npm install --save-dev gulp-notify

gulp-plumber

コンパイルエラーなどがあってもgulpを起動したままにしてくれる。これがないと毎回gulpコマンドを叩く必要があるので便利。

npm install --save-dev gulp-plumber

gulp-imagemin, imagemin-pngquant

画像サイズの最適化を行ってくれる。 tinypngやimageoptimで毎回圧縮するのは手間なのでこれも便利。

gulp-imageminはjpegとpng両方やってくれるが、pngの圧縮率が低いため imagemin-pngquantでpngをいい感じにしてくれている(と思う)

npm install --save-dev gulp-imagemin imagemin-pngquant

3. gulpfile.jsを作る

プロジェクトのディレクトリでtouch gulpfile.jsを打つ。エディタから「新規ファイルの作成」などで作っても良い。

4. gulpfile.jsに色々書く

今回ティザーで使ったgulpfile.jsの中身を注釈付けてそのまま書く。

var gulp = require('gulp'); 
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var imagemin = require('gulp-imagemin')
var pngquant = require('imagemin-pngquant')
 
// 画像の圧縮
gulp.task('image-min', function(){
  gulp.src('./src/images/*') // src/imagesにある画像を読み込み
  .pipe(imagemin([pngquant({quality: '60-80', speed: 1})])) // pngの圧縮サイズを指定
  .pipe(imagemin()) // おまじないでもう一回実行
  .pipe(gulp.dest('./dist/assets/images/')); // 吐き出し先を指定
});
 
// gulp起動時に自動更新用のブラウザを立ち上げてくれる
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "./dist/",
      index: "見たいHTMLファイル名.html"
    }
  });
});

// ファイル変更時にブラウザを自動更新
gulp.task('bs-reload', function () {
  browserSync.reload();
});

// sassのコンパイル
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss') // scssの読み込みを指定
  .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')})) //エラーがあった場合に通知 & gulpを止めない
  .pipe(sass({style : 'expanded'})) // cssの書き出し方法を指定
  .pipe(gulp.dest('./dist/css')); // 吐き出し先を指定
});

// gulp起動時にやってくれるやつ
gulp.task('default', ['browser-sync', 'image-min'], function() { // gulp起動時に画像の圧縮と更新用ブラウザ立ち上げを実行
  gulp.watch('./src/scss/*.scss', ['sass']); // scssに変更があった場合上のsassタスクを実行
  gulp.watch("./dist/*.html",    ['bs-reload']); // htmlに変更があった場合上のbs-reloadタスクを実行
  gulp.watch("./dist/css/*.css", ['bs-reload']); // cssに変更があった場合上のbs-reloadタスクを実行
  gulp.watch("./dist/js/*.js",   ['bs-reload']); // javascriptに変更があった場合上のbs-reloadタスクを実行
});

5. ファイル構成

root/
┠ dist/ (書き出し先)
│ ┠ hogehoge.html
│ ┠ css/
│ ┠ js/
│ ┠ assets/images/
┠ src/ (コンパイル前)
│ ┠ scss/
│ ┠ images/
└ gulpfile.js

終わりに

gulp-hamlも入れようと思ったのですが、今回は2ページだけだったので入れませんでした。ただページ数これから増えない想定だったので、これから導入したらhtmlの手戻りが大きそうだな。。。

久々のhtmlでした。もっと便利なプラグインがあったら追加していきます。

fujiken design blog

でざいんをやっていく

ティザーサイトをgulpでサッと作る

前置き