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

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

目次

サンプル 1.プロジェクトフォルダを作成する
  2.Gulpをインストールする
  3.jsファイルを圧縮するプラグインをインストールする
  4.gulpfile.jsを作成する
5.jsファイルを圧縮するコマンドを実行する
Gulpのバージョンを確認する

前提

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

1.プロジェクトフォルダを作成する

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

2.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"
}

 

2.Gulpをインストールする

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

D:\gulptest>npm install -g gulp

D:\gulptest>npm install gulp

 

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

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

D:\gulptest>npm install gulp-uglify

D:\gulptest>npm install gulp-rename

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

 

4.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ファイルを新規に作成し圧縮します。

 

5.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コマンドで確認します。

関連の記事

Node.jsのインストールとhello worldを表示する手順

△上に戻る