GULPでJavaScriptをミニファイ化する方法(gulp-uglify)

2021年7月25日JavaScript

GULPでJavaScriptをミニファイ化する方法を紹介します。

GULPでJavaScriptをミニファイ化する方法

GULPでJavaScriptをミニファイ化して圧縮には、gulp-uglifyを使います。

gulp-uglifyをインストール

gulp-uglifyを以下コマンドでインストールします。

npm i gulp-uglify --save-dev

gulpfile.jsに記述

const gulp = require("gulp");
const browserSync = require('browser-sync').create();
const uglify = require('gulp-uglify');

// JavaScript
gulp.task('javascript', function() {

  return (
    gulp.src('./src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
  )
})

// Watch changes and browser-sync
gulp.task('watch', function() {
  // browser-sync
  browserSync.init({
    server: {
      baseDir: './' //index.htmlをrootにおいている場合。
    },
    browser: 'google chrome'
    // firefox developer edition
  })
  // watch changes
  gulp.watch(['**/*.html', './src/js/**/*.js'], gulp.series(['javascript']))
  .on('change', browserSync.reload);
});