Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【今更】pugとstylusとbabelをgulp

More than 3 years have passed since last update.

鈴木です。父親の手伝いでとある団体の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にデプロイ。絶対もっと効率の良い方法がありそうですね。

sosukesuzuki
Prettier メンテナです
http://sosuke.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away