質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.02%

  • CSS

    4792questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3379questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • gulp

    240questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • Sass

    209questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • npm

    208questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

gulp del のファイル除外方法

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 272

HiroFumi

score 3

前提

gulp での、ファイルコピー、削除に関してのご質問です。
よろしければご回答をお願い致します。
開発環境は以下になります。

開発環境

project
├── .csscomb.json
├── gulpfile.js 
├── package.json
├── node_modules 
├── src
│    ├── assets
│    ├── images
│    ├── js 
│    ├── scss
│ 
│ 
└── dist 
      ├── js 
      ├── css 
      ├── images
      ├── .html


src = 開発ディレクトリ(作業用ファイル群)
dist = 出力先(納品用ファイル群)

・以下のように出力します。
src/images → dist/images(圧縮)
src/js         → dist/js(圧縮)
src/scss     → dist/css(ビルド・圧縮)
src/assets  → dist(コピー)

やりたい事

・ファイル構成を維持したまま assets → dist へのファイルコピー(問題なく動作)
・assets 内のファイルを削除した場合に dist 内のファイルも削除するように delプラグインでコピー前にファイルを削除させたい。(問題なく動作)
・その際、dist 直下の js、css、images ディレクトリとその中のファイルは削除しない。(問題点)

以下gulpfile.js の抜粋

※reloadT は、オートリロードタスク

//////////////////////
// ファイル削除
//////////////////////
gulp.task('tplcleanT', function() {
  return del(['./dist/**/*', '!./dist/images/**/*', '!./dist/js/**/*', '!./dist/css/**/*']); //ここの指定方法がわかりません。。
});

//////////////////////
// ファイルコピー
//////////////////////
gulp.task('copyT', function() {
  return gulp.src(['./dist/**/*'],{dot: true, base: './src/assets'})
  .pipe(gulp.dest('./dist/**/*'));
});

//////////////////////
// タスク自動化
//////////////////////
gulp.task('watchT', function() {
  gulp.watch(['./src/assets/**/*'], function(){ runSequence('tplcleanT', 'copyT', 'reloadT')});
});

//////////////////////
// デフォルトタスク
//////////////////////
gulp.task('default',['watchT','browserSyncT']);

試したこと

現在、ファイルコピー、コピー前のファイル削除まで正常に動作しているのですが、 削除から除外するファイル指定で躓いています。。

tplcleanT タスクの指定が

return del(['./dist/**/*', '!./dist/images/**/*', '!./dist/js/**/*', '!./dist/css/**/*']);


だと、指定した除外ディレクトリも含め assets 内すべてのファイル、ディレクトリが削除されます。

また、

return del(['./dist/**/*', '!./dist/images)', '!./dist/js', '!./dist/css']);


は、除外ディレクトリは削除されないですが、中のファイルは削除されます。

因みにこちらで、希望通りの動作となりました。

return del(['./dist/**/*', '!./dist/images/**/*', '!./dist/images', '!./dist/js/**/*', '!./dist/js', '!./dist/css/**/*', '!./dist/css']);


しかしスマートな方法ではないと思いますので、適切な指定の仕方を教えていただきたいです。

是非、よろしくお願い致します!!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    4792questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3379questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • gulp

    240questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • Sass

    209questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • npm

    208questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。