GULPでミニファイ化したファイルにminの接尾字をつける方法(gulp-rename)

2021年7月26日GULP

GULPでファイル名を変更して保存する方法を紹介します。
例としてSASSやJavaScriptファイルをミニファイ化したファイルにminの接尾字をつける方法を取り上げます。

GULPでミニファイ化したファイルにminの接尾字をつける手順

• gulp-renameをインストール
• gulpfile.jsに記述
• htmlの修正

gulp-renameをインストール

npm i gulp-rename --save-dev
or
yarn add gulp-rename --dev

上のコマンドでインストールします。
gulpは基本–devでインストールするdevDependensiesにいれます。

gulpfile.jsに記述

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

まずは、変数に格納します。

オブジェクトで変更名を指定する方法

// JavaScript
gulp.task('javascript', function() {
  return gulp
    .src('./src/js/**/*.js')
    .pipe(uglify()) //minify
    .pipe(rename({
      suffix: ".min",
    }))
    .pipe(gulp.dest('./dist/js'))
})

npm公式: https://www.npmjs.com/package/gulp-rename
接尾字だけでなく、接頭辞も変更できたり、柔軟な対応が可能です。
上の例では、suffiつまり、ファイルの最後に.minをつけるという名前の変更を指示しています。

関数で変更名を指定する方法

また関数でも指定可能です。

下の例では、mapファイルには.minをつけずに、cssファイルのみに.minをつける名前の変更を行います。

const gulp = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');

// SASS compile
gulp.task("sass", function() {
  return gulp
    .src(["./src/sass/**/*.scss", '!./src/sass/not-compile.scss'])
    .pipe(sourcemaps.init()) //sourcemaps starts
    .pipe(sass()) //compile
    .pipe(cssnano()) //minify
    .pipe(sourcemaps.write('.')) //sourcemaps ends
    // renameを関数でやる方法
    .pipe(rename((path) => {
      // manファイルにはminをつけたくないのでif文
      if(!path.extname.endsWith('.map')) {
        path.basename += '.min'
      }
    }))
    .pipe(gulp.dest("./dist/css"));
});

renameの()の中に関数を入れるだけで、後は通常のJavaScriptです。

htmlの修正

<!-- <link rel="stylesheet" href="./dist/css/main.css"> -->
<link rel="stylesheet" href="./dist/css/main.min.css">

<!-- <script src="./dist/js/project.js"></script> -->
<script src="./dist/js/project.min.js"></script>

cssファイルもJavaScriptファイルも忘れずに、.minに変更します。