gulp-zipで圧縮したが、ディレクトリの構成が変わってしまう

Question

gulpを初めて触り、任意のディレクトリを圧縮したかった。

コード

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

gulp.task('zip', () => {
  return gulp
    .src('css/*')
    .pipe(zip('archive.zip'))
    .pipe(gulp.dest('dist'));
});

ディレクトリ構成

sample

• index.html
• css/
  • style.css
  • reset.css
• dist/

このgulpタスクを走らせると
dist配下にarchive.zipができ確認すると

archive.zip

• style.css
• reset.css

だけになってしまっていた。

想定していたのは
archive.zip
- css
- style.css
- reset.css
この構成だったのだがうまくいかない。

試したこと

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

gulp.task('zip', () => {
  return gulp
    .src('css/**')
    .pipe(zip('archive.zip'))
    .pipe(gulp.dest('dist'));
});

srcの部分を**にしてみたが結果は変わらなかった。。

Comments

[2KOH]

「gulp-zip ディレクトリ構成」等で検索しましたか？

[退会済みユーザー]

検索して何個か試したりしてるのですが
空のディレクトリが吐かれるだけでした。

[2KOH]

本当に検索して出てきた結果を試してできなかったというのであれば、検索しても出てこないようなやり方を回答しなければなりません。
少なくとも自分にはそんなことは到底無理なので、残念ながら力になれません。

[退会済みユーザー]

わかりました。ありがとうございました。

Answer 1

もし、ディレクトリ構造が下記の様でしたら、

現在

/sample
   ├─ index.html
   ├─ /css
   │  ├─ style.css
   │  └─ reset.css
   ├─ /dist
   └─ gulpfile.js

↓
こちらの用に、assetsなどのフォルダを作成し、その中にcssなどを格納すると実現できるかと思います。

修正案

/sample
   ├─ /assets
   │  ├─ index.html
   │  └─ /css
   │      ├─ style.css
   │      └─ reset.css
   ├─ /dist
   └─ gulpfile.js

今後gulpのプラグインを増やしていく中で、ディレクトリを分けていたほうが作業しやすいです。
また、ディレクトリ構造を変えた際は、

return gulp.src('css/*')
を、
return gulp.src('assets/css/*')
等の任意のディレクトリに変更されてください。

もしうまく行かない場合は、
下記のbaseを使った書き方をお試しいただければ幸いです。

参考：gulp-zipでディレクトリ構成を保ったまま圧縮する
https://qiita.com/iwata-n/items/c955625bf801f2059026