GULPでJavaScriptとトランスパイルする方法(gulp-babel)

2021年8月2日GULP

babelを使ってGULPでJavaScriptとトランスパイルする方法を紹介します。

GULPでJavaScriptとトランスパイルする手順

• babelをインストール
• gulpfile.jsに記述

babelをインストール

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

変更される場合があるので、公式サイトで確認してインストールしたほうがよさそうです。

gulpfile.jsに記述

const gulp = require('gulp');
const rename = require('gulp-rename');
// JS
const uglify = require('gulp-uglify'); 
const concat = require('gulp-concat');
const babel = require('gulp-babel');

// JavaScript
gulp.task('javascript', function () {
  return (
    gulp
      .src('./src/js/**/*.js')
      // .src(['./src/js/project.js', './src/js/alert.js']) //concatの順番を指定したいとき
      .pipe(babel({ //トランスパイル
        presets: ['@babel/env']
      }))
      .pipe(concat('project.js')) //project.jsに他のjsファイルをconcat
      .pipe(uglify()) //minify
      .pipe(
        rename({
          suffix: '.min',
        })
      )
      .pipe(gulp.dest('./dist/js'))
  );
});

concatの前に指定します。
presetsを指定して、babel/envとしています。