2022-07-05/2023-05-23

gulpでzip化を行う

WordPressでテーマやプラグインを作成をする際にcssやjsはwebpackを使用していました。

当然のことながらプラグインの場合はzip化が必要になります。さすがに毎度手作業で「node_modules」と「src」と…というように除外するのは面倒くさいということでgulpを使うことにしました。

gruntではないのはgulpは使ったことがあるけど、gruntは使ったことはないからです。

gulpでzip化を行う

gulpでzip化するのに便利な「gulp-zip」というパッケージがあるのでそれを利用します。

npm install --save-dev gulp gulp-zip

続いてgulpfile.jsの中身を作成していきます。

gulpを触ったことある人ならcssやjsをbundleするより簡単だと思います。

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

まずは読み込みます。

const zipName = 'sample.zip';
const dist = 'dist';
const distFiles = [
    '**',
    `!${dist}`,
    `!${dist}/**`,
    '!node_modules',
    '!node_modules/**',
    '!.gitignore',
    '!.stylelintignore',
    '!composer.json',
    '!composer.lock',
    '!gulpfile.js',
    '!package-lock.json',
    '!package.json',
    '!webpack.config.js',
    '!assets/src',
    '!assets/src/**',
];

続いてzip化の対象を明記していきます。

「**」はフォルダ下も再帰的に読み込むものです。

各自開発の環境は異なると思いますのでそれぞれで必要なファイルを対象にしてください。

上の例のように全部含めてからいらないファイルを除外していく形でも必要なファイルを記述していく形でも問題ありません。

const makeZip = ( done ) => {
    gulp.src( distFiles, { base: '.' } )
        .pipe( zip( zipName ) )
        .pipe( gulp.dest( dist ) )
    done();
};

exports.default = gulp.series(
    makeZip
);

gulp-zipの使い方は簡単でzip()にファイル名を指定するだけでOKです。

オプション等詳細はで確認してみてください。

gulp

あとは実行フォルダに入ってgulpを実行するだけです。

指定したフォルダにzipファイルが生成されます。

あまりにも容量が大きい場合は少し遅れて対象のフォルダに出力されます。

gulpでzip化を行う

記事の内容