• HOME
• Node.js
• gulpを使ったJavaScriptやスタイルシートの結合と圧縮方法

gulpを使ったJavaScriptやスタイルシートの結合と圧縮方法

Tweet

Node.js上で動作するgulpを使った、フロントエンドのJavaScriptやスタイルシートの結合や圧縮を自動化する方法です。

本記事作成時のバージョンは次のとおりです。

• gulp 4.0.2

gulp のインストール

次のコマンドを実行します。

グローバルインストール

npm install -g gulp

ローカルインストール

npm install gulp

ファイルを結合する

プラグインのインストール

次のコマンドを実行してプラグインをインストールします。

npm install gulp-concat

gulpfile

カレントフォルダにgulpfile.jsを作成し、次のような内容を記述します。

const gulp = require('gulp');
const concat = require('gulp-concat');

function task() {
  return gulp.src([
    './src/first.js',
    './src/second.js',
  ])
  .pipe(concat('bind.js'))
  .pipe(gulp.dest('./dest'));
}

exports.task = task;

用意したJavaScriptファイル

function putMessage(message) {
  console.log(message);
}

putMessage("abc");

コマンドの実行

カレントフォルダで次のコマンドを実行するとgulpfileに従ってファイルを結合します。

gulp task

出力結果

function putMessage(message) {
  console.log(message);
}

putMessage("abc");

結合したファイルを実行

$ node ./dest/bind.js
abc

JavaScript ファイルを圧縮する

プラグインのインストール

次のコマンドを実行して、プラグインをインストールします。

npm install gulp-uglify
npm install gulp-rename

gulpfile

カレントフォルダにgulpfile.jsを作成し、次のような内容を記述します。ここではファイルの結合と圧縮を一緒に行います。

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

function taskmin() {
  return gulp.src([
    './src/first.js',
    './src/second.js',
  ])
  .pipe(concat('bind.js'))
  .pipe(uglify())
  .pipe(rename({
    extname: '.min.js'
  }))
  .pipe(gulp.dest('./dest'));
}

exports.taskmin = taskmin;

コマンドの実行

カレントフォルダで次のコマンドを実行するとgulpfileに従ってファイルを結合した後、その結果を圧縮します。

gulp taskmin

出力結果

function putMessage(e){console.log(e)}putMessage("abc");

圧縮したファイルを実行

$ node dest/bind.min.js
abc

スタイルシートの圧縮

プラグインのインストール

次のコマンドを実行して、プラグインをインストールします。

npm install gulp-clean-css
npm install gulp-rename

gulpfile

カレントフォルダにgulpfile.jsを作成し、次のような内容を記述します。

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

function taskcssmin() {
  return gulp.src([
    './src/h.css',
  ])
  .pipe(cleanCSS())
  .pipe(rename({
    extname: '.min.css'
  }))
  .pipe(gulp.dest('./dest'));
}

exports.taskcssmin = taskcssmin;

用意したスタイルシートファイル

h1 {
    font-size: 16px;
}

h2 {
    font-size: 14px;
}

p {
    margin-top: 1rem;
}

コマンドの実行

カレントフォルダで次のコマンドを実行するとgulpfilに従ってファイルを圧縮します。

gulp taskcssmin

出力結果

h1{font-size:16px}h2{font-size:14px}

スタイルシートの結合と圧縮

gulpfile

JavaScriptと同じように、スタイルシートを結合して圧縮する場合はこのようなgulpfileになります。

const gulp = require('gulp');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

function taskcssmin() {
  return gulp.src([
    './src/h.css',
    './src/p.css',
  ])
  .pipe(concat('style.css'))
  .pipe(cleanCSS())
  .pipe(rename({
    extname: '.min.css'
  }))
  .pipe(gulp.dest('./dest'));
}

exports.taskcssmin = taskcssmin;

コマンドの実行

gulp taskcssmin

出力結果

h1{font-size:16px}h2{font-size:14px}p{margin-top:1rem}

Tweet

前の記事

GracefulShutdownManagerを使ってExpressサーバーを正常に終了させる

次の記事

async-lockを使った排他制御