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コマンドで確認します。
関連の記事