gulpfile.jsからgulpfile.tsに変更する

gulpfile.jsからgulpfile.tsに変更した時のメモ

version

• gulp: ^4.0.2
• ts-node: ^8.6.1
• typescript-require: ^0.2.10

gulpfile.js

基本的に変更はしていませんが、念のため

gulpfile.jsの内容

const { src, dest, watch, parallel } = require('gulp')
const pug = require('gulp-pug')
const data = require('gulp-data')
const stylus = require('gulp-stylus')
const postcss = require('gulp-postcss')
const postcssPresetEnv = require('postcss-preset-env')
const autoprefixer = require('autoprefixer')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const sourcemaps = require('gulp-sourcemaps')
const cleanCSS = require('gulp-clean-css')
const browserSync = require('browser-sync')
const webpackStream = require('webpack-stream')
const webpack = require('webpack')
const htmlmin = require('gulp-htmlmin')
const mode = require('gulp-mode')({
  modes: ['production', 'development'],
  default: 'development',
  verbose: false,
})
const isProduction = mode.production()

const webpackConfigDev = require('./webpack.dev')
const webpackConfigProd = require('./webpack.prod')
const webpackConfig = isProduction ? webpackConfigProd : webpackConfigDev

const srcPath = {
  html: ['src/pug/**/*.pug', '!' + 'src/pug/**/_*.pug'],
  stylus: 'src/**/*.styl',
  js: 'src/**/*.ts',
  image: 'src/assets/img/**/*',
  fonts: 'src/assets/fonts/**/*',
  static: 'src/static/**/*',
}

const destPath = {
  root: 'dist/',
  assets: 'dist/assets/',
}

const jsFunc = () => {
  return webpackStream(webpackConfig, webpack)
    .on('error', function(e) {
      this.emit('end')
    })
    .pipe(dest(`${destPath.assets}js/`))
    .pipe(browserSync.reload({ stream: true }))
}

const htmlFunc = () => {
  return src(srcPath.html)
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(
      data(file => {
        return {
          relativePath: file.history[0].replace(file.base, ''), // ページ情報仮置き
        }
      })
    )
    .pipe(
      pug({
        basedir: 'src/pug',
        pretty: true,
      })
    )
    .pipe(
      mode.production(
        htmlmin({
          collapseWhitespace: true,
          minifyJS: true,
          removeComments: true,
        })
      )
    )
    .pipe(dest(destPath.root))
    .pipe(browserSync.reload({ stream: true }))
}

const stylusFunc = () => {
  return src('src/assets/stylus/*.styl')
    .pipe(mode.development(sourcemaps.init()))
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(stylus())
    .pipe(postcss([postcssPresetEnv(autoprefixer)]))
    .pipe(cleanCSS())
    .pipe(mode.development(sourcemaps.write()))
    .pipe(dest(`${destPath.assets}css/`))
    .pipe(browserSync.reload({ stream: true }))
}

const imageFunc = () => {
  return src(srcPath.image).pipe(dest(`${destPath.assets}img/`))
}

const fontsFunc = () => {
  return src(srcPath.fonts).pipe(dest(`${destPath.assets}fonts/`))
}

const staticFunc = () => {
  return src(srcPath.static).pipe(dest(destPath.root))
}

const browserSyncFunc = () => {
  browserSync({
    server: {
      baseDir: 'dist/',
      index: 'index.html',
    },
  })
}

const watchFiles = () => {
  watch(srcPath.html[0], htmlFunc)
  watch(srcPath.stylus, stylusFunc)
  watch(srcPath.js, jsFunc)
  watch(srcPath.image, imageFunc)
  watch(srcPath.static, staticFunc)
  watch(srcPath.fonts, fontsFunc)
}

exports.default = parallel(
  watchFiles,
  [htmlFunc, stylusFunc, jsFunc, imageFunc, staticFunc, fontsFunc],
  browserSyncFunc
)

exports.build = parallel(htmlFunc, stylusFunc, jsFunc, imageFunc, staticFunc, fontsFunc)

変更した内容

1. gulpfile.jsからgulpfile.tsにファイル名を変更する

2. 必要なパッケージインストール

ts-node

ts-node

typescriptのコードをnodeで直接実行するためのもの

typescript-require

typescript-require - npm

typeescriptのコードでrequireを使うためのもの

終わり

以上で、gulpfile.tsでもエラーなくbuildなどを行うことができます。