Gulpでjsファイルを圧縮するサンプル

Gulpでjsファイルを圧縮するサンプルです。(確認環境：Windows10)

サンプル	１．プロジェクトフォルダを作成する
	２．Gulpをインストールする
	３．jsファイルを圧縮するプラグインをインストールする
	４．gulpfile.jsを作成する
	５．jsファイルを圧縮するコマンドを実行する
	Gulpのバージョンを確認する

前提

Gulpのインストールは、Node.jsとnpmが必要です。
Node.jsのインストールとhello worldを表示する手順

１．プロジェクトフォルダを作成する

１．任意のフォルダを作成します。D:\gulptestを作成しました。

２．npm init -yコマンドを実行で初期化されます。

D:\gulptest>npm init -y
Wrote to D:\gulptest\package.json:

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

２．Gulpをインストールする

npm install コマンドでGulpをインストールします。グローバルインストール(-gあり)とローカルインストール(-gなし)を行います。

D:\gulptest>npm install -g gulp

D:\gulptest>npm install gulp

３．jsファイルを圧縮するプラグインをインストールする

npm install コマンドでプラグインをインストールします。

D:\gulptest>npm install gulp-uglify

D:\gulptest>npm install gulp-rename

gulp-uglifyはjsファイルを圧縮し、gulp-renameはファイル名の変更を行います。

４．gulpfile.jsを作成する

const gulp = require("gulp");
const rename = require("gulp-rename");
const uglify = require("gulp-uglify");

function compressJs() {
  return gulp.src('./test1/test1.js')
  .pipe(uglify())
  .pipe(rename({
    extname: '.min.js'
  }))
  .pipe(gulp.dest('test1/'));
}

exports.compressJs = compressJs;

D:\gulptest\test1\test1.jsファイルからD:\gulptest\test1\test1.min.jsファイルを新規に作成し圧縮します。

５．jsファイルを圧縮するコマンドを実行する

D:\gulptest>gulp compressJs

gulpコマンドの引数にgulpfile.jsに記述した関数名を指定します。

Gulpのバージョンを確認する

D:\gulptest>gulp -v
CLI version: 2.3.0
Local version: 4.0.2

バージョンは、gulp -vコマンドで確認します。