【Gulp】gulp-renameで出力ファイルを簡単操作

gulp

2021.02.25

どうもfujiharaです。本日はgulpの便利プラグイン gulp-rename をご紹介します。

背景

gulpを使う場合src, dist でソース、出力先を指定するとかと思います。

gulpfile.js


import gulp from 'gulp';
const { src, dest } = gulp;

export default () => {
  return src('src/js/*.js')
    .pipe(processA()) // 処理A
    .pipe(processB()) // 処理B
    .pipe(dest('dist/js'));
}

tree (ディレクトリ抜粋)


├── dist
│   └── js
│       └── index.js
├── gulpfile.js
└── src
    └── js
        └── index.js

gulp-rename

gulp-renameをかませると以下のようになります。


import gulp from 'gulp';
import rename from 'gulp-rename';
const { src, dest } = gulp;

export default () => {
  return src('src/js/*.js')
    .pipe(processA()) // 処理A
    .pipe(processB()) // 処理B
    .pipe(rename((path) => {
      //path = {dirname: '.', basename: 'index', extname: '.js'} <- (上記 tree内の src/js/index.jsの場合)
      return path;
    }))
    .pipe(dest('dist/js'));
}

ここで上記のpath.dirname, path.basename, path.extname を書き換えると出力を任意に変えられます。


path.dirname = '../change-dir'; //-> 出力先が dist/change-dir になります。
path.basename = 'change-name'; // -> 出力ファイルが change-name.js になります。
path.extname = '.txt'; // -> 出力ファイルが index.txt になります。