【今更】pugとstylusとbabelをgulp

鈴木です。父親の手伝いでとある団体のLPを作ることになったのですが、HTMLとCSSとJSを素で書くなんて絶対したくないので、しない方法です。

インストール

npmよりyarnの方が好きなので、yarnを使います。

yarn init
yarn add --dev gulp gulp-pug gulp-stylus gulp-babel babel-preset-env browser-sync gulp-notify gulp-plumber nib

関連パッケージをインストールします。

パッケージ	役割
gulp	タスクランナー
gulp-pug	gulpでpugをhtmlにする
gulp-stylus	gulpでstylusをcssにする
gulp-babel	gulpでbabelを使う
babel-preset-env	babelのトランスパイルする環境を設定する
browser-sync	変更を検知した時にブラウザーに自動で反映させる
gulp-notify	エラーが起こった時にデスクトップ通知を行う
gulp-plumber	エラーをハンドリングする時に使う
nib	stylusでmixinとかの便利機能を使えるようにする

設定を書く

とりあえず.babelrc

.babelrc

{ 
 "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

babel-preset-envを使います。babel-preset-envについてはドキュメントを読んでください。
次にgulpfile.js。

gulpfile.js

const gulp = require('gulp')
const stylus = require('gulp-stylus')
const babel = require('gulp-babel')
const pug = require('gulp-pug')
const nib = require('nib')
const plumber = require('gulp-plumber')
const browserSync = require('browser-sync')
const notify = require('gulp-notify')

gulp.task('default', ['stylus', 'browser-sync', 'pug', 'watch', 'babel', 'img'])

gulp.task('watch', () => {
  gulp.watch(['./stylus/**'], () => {
    gulp.start(['stylus'])
  })
  gulp.watch(['./pug/**'], () => {
    gulp.start(['pug'])
  })
})

gulp.task('browser-sync', () => {
  browserSync({
    server: {
      baseDir: './dist/'
    }
  })
  gulp.watch('./dist/js/*.js', ['reload'])
  gulp.watch('./dist/*.html', ['reload'])
  gulp.watch('./dist/css/*.css', ['reload'])
  gulp.watch('./dist/img/*.*', ['reload'])
})

gulp.task('stylus', () => {
  gulp.src('./stylus/*.styl')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(stylus({
      import: ['nib'],
      use: [nib()]
    }))
    .pipe(gulp.dest('./dist/css'))
})

gulp.task('pug', () => {
  const option = {
    pretty: true
  }
  gulp.src('./pug/*.pug')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(pug(option))
    .pipe(gulp.dest('./dist'))
})

gulp.task('babel', () => {
  gulp.src('./js/**/*.js')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(babel())
    .pipe(gulp.dest('./dist/js'))
})

gulp.task('reload', () => {
  browserSync.reload()
})

次にpackage.jsonの`scripts'。

package.json

"scripts": {
  "gulp": "node_modules/.bin/gulp pug && node_modules/.bin/gulp stylus && node_modules/.bin/gulp babel && node_modules/.bin/gulp",
  "test-deploy": "node_modules/.bin/gulp pug && node_modules/.bin/gulp stylus && node_modules/.bin/gulp babel && node_modules/.bin/gh-pages -d dist -b master"
}

pug/stylus/babel全部実行した後に、監視するためにgulpを実行する。
test-deployの方はgh-pagesでgtihubpagesにデプロイ。絶対もっと効率の良い方法がありそうですね。