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

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

新規登録して質問してみよう
ただいま回答率
85.50%
npm

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

HTML5

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

Sass

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

CSS

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

gulp

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

Q&A

0回答

3044閲覧

gulp del のファイル除外方法

HiroFumi

総合スコア11

npm

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

HTML5

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

Sass

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

CSS

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

gulp

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

0グッド

0クリップ

投稿2017/10/04 16:15

###前提
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 の抜粋

js

1※reloadT は、オートリロードタスク 2 3////////////////////// 4// ファイル削除 5////////////////////// 6gulp.task('tplcleanT', function() { 7 return del(['./dist/**/*', '!./dist/images/**/*', '!./dist/js/**/*', '!./dist/css/**/*']); //ここの指定方法がわかりません。。 8}); 9 10////////////////////// 11// ファイルコピー 12////////////////////// 13gulp.task('copyT', function() { 14 return gulp.src(['./dist/**/*'],{dot: true, base: './src/assets'}) 15 .pipe(gulp.dest('./dist/**/*')); 16}); 17 18////////////////////// 19// タスク自動化 20////////////////////// 21gulp.task('watchT', function() { 22 gulp.watch(['./src/assets/**/*'], function(){ runSequence('tplcleanT', 'copyT', 'reloadT')}); 23}); 24 25////////////////////// 26// デフォルトタスク 27////////////////////// 28gulp.task('default',['watchT','browserSyncT']); 29

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

tplcleanT タスクの指定が

js

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

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

また、

js

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

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

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

js

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問