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

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

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

  • gulp 4.0.2

gulp のインストール

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

グローバルインストール

npm install -g gulp

ローカルインストール

npm install gulp
gulpはグローバルにインストールしていてもローカルにインストールが必要です。またプラグインもグローバルとローカルにインストールが必要なため、個人的にはgulpのみグローバル、プラグインは必要な環境ごとにインストールでいいかなと思います。
gulpをグローバルインストールしなかった場合は以降のコマンドでgulpの部分をnpx gulpとしてください。

ファイルを結合する

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

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

npm install gulp-concat

gulpfile

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

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ファイル

src/first.js
function putMessage(message) {
  console.log(message);
}
src/second.js
putMessage("abc");

コマンドの実行

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

gulp task

出力結果

dest/bind.js
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を作成し、次のような内容を記述します。ここではファイルの結合と圧縮を一緒に行います。

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

出力結果

dest/bind.min.js
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を作成し、次のような内容を記述します。

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;

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

src/h.css
h1 {
    font-size: 16px;
}

h2 {
    font-size: 14px;
}
src/p.css
p {
    margin-top: 1rem;
}

コマンドの実行

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

gulp taskcssmin

出力結果

dest/h.min.css
h1{font-size:16px}h2{font-size:14px}

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

gulpfile

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

gulpfile.js
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

出力結果

dest/style.min.css
h1{font-size:16px}h2{font-size:14px}p{margin-top:1rem}
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です