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

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

ただいまの
回答率

90.43%

  • CSS

    6441questions

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

  • HTML5

    4438questions

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

  • gulp

    296questions

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

  • Sass

    289questions

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

gulpでのファイル削除やリネームについて

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,359

SaekoIwaki

score 25

いつもお世話になっております。
最近Gulpの便利さに感動して、使い方を勉強中です。
よろしければご回答お願いします。

フォルダ階層

project
├── node_modules
├── gulpfile.js
├── package.json
├──app
├── project
│    ├──js
│    ├──css
│    ├──image
│    ├──sass
│    ├──.html


└── src
├──js
├──css
├──image
├──sass
├──
.html

現状

現在のGulp環境は、このような階層になっています。
appフォルダにprojectフォルダとsrcフォルダがあります。
projectフォルダは手を付けず、そのままアップロードできる形(納品)にして
実際のhtml,scss,js等の編集はsrcフォルダで行います。
(表示が崩れてしまいましたが、appフォルダの中にprojectとsrcが入ってます。)

問題点

srcフォルダで編集したファイルは自動的にprojectフォルダにコピーされるようにしました。
そこまでは良かったのですが、srcフォルダでファイルをリネームや削除をした時に
projectに反映されず、新しいファイルとしてコピーされてしまいます。削除も同様に、srcフォルダ内で何か消した場合、projectフォルダでは削除されません。

例:index.html→aaa.htmlに変更
projectフォルダに新しいファイルaaa.htmlとして登録される。

最初はgulp-renameやgulp-rimraf.delで試したのですが、反映まではされなかったので
そもそもこういった差分?に使うプラグインではなかったのでしょうか。なにか違う方法があればご教授ください。

gulpfile.js(シンプルに.htmlを吐き出すだけのサンプルを作りました。)

gulp.task( 'copy', function() {
    gulp.src( 'app/src/*.html'  ).pipe( gulp.dest( 'app/project/') );
} );
/****** 省略 *****/
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi-sun

    2016/12/03 18:40

    > 表示が崩れてしまいました ```でくくってみてください。インデントを認識してくれるようになります。

    キャンセル

  • SaekoIwaki

    2016/12/03 21:35

    ありがとうございます!何回か修正更新したのですが、サーバーエラーになってしまうので時間を置いて、再度更新致します。

    キャンセル

回答 1

checkベストアンサー

+2

gulp.src( 'app/src/*.html'  ).pipe( gulp.dest( 'app/project/') );

この行のsrcの引数として定義したapp/src/*.htmlですが、
globと呼ばれるパスから任意のファイルを抜き出すためによく使われる形式です。

どういうことしているかというと、
app/srcフォルダの配下のファイルから末尾が.htmlというファイルを探して、
見つかり次第app/projectフォルダの配下にせっせとコピーしているイメージです。
なので、app/projectフォルダのファイルを精査して不要なファイルを見つけてくれるということはしません。

質問者さんがイメージしているapp/srcフォルダとapp/projectフォルダの同期とは異なります。


じゃあどうすればいいの?
創造の前には破壊が必要です。

例えばフォルダごと消去してしまうinitializeというタスクを作ってみました。
また、initialize -> copyの順に動作するbuildというタスクを用意しました。

Gulpは並列動作しかしない奴なのでrun-sequence - npmというライブラリを利用して解決します。
Usageのソースコードをちら見すれば何がしたいのかすぐわかると思います。

var gulp = require('gulp');
var del = require('del');
var runSequence = require('run-sequence');

gulp.task('initialize', function() {
  return del('app/project');
});

gulp.task('copy', function() {
  gulp
    .src('app/src/*.html')
    .pipe(gulp.dest('app/project/'));
});

gulp.task('build', function(done) {
  runSequence(
    'initialize',
    'copy',
    'build-scripts',
    done);
});

追記:gulp.watchをする場合

watchの目的は差分を取ってその写しがほしいわけですから、
毎回app/projectフォルダを捨てるのはやめていただきたいという場面もありそうです。
ですので、実運用ではwatch部分は最小限にまとまっていた方が使いやすいでしょう。

gulp.task('watch', function() {
  watch(['app/src/**/*.+(jpg|jpeg|gif|png|html|php)'], function(event){
    gulp.start(['build']);
  });
});

gulp.task('default', ['build'], function(done) {
  runSequence(
    'build',
    'watch',
    done);
});

上記は1コマンドで全部やるためにタスクを増やしてしまいましたが、
プロジェクトが肥大化してくると組み合わせが膨大になるかと思います。
よく使う幾つかを除いて各自が勝手に組み合わせるのもありかと思います。

コマンドプロンプトやBashなどは2コマンドを直列で実行することが出来ます。
build終わったらwatch走らせるよーみたいな奴ですね。
下記にサンプルとして複数コマンド用意してみました。

# windows:cmd http://d.hatena.ne.jp/ku__ra__ge/20081009/p7
gulp build & gulp watch

# bash http://qiita.com/wwwaltz/items/9ee247ee8fe3ab63fd27
gulp build && gulp watch

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/03 21:55

    ご回答ありがとうございます!
    >>創造の前には破壊が必要です。
    その発想が思いつきませんでした。早速破壊神になり、破壊してみました!
    無事に願ったとおりの動きをしてくれました。

    流れ的には、【変更物があった→task(build)を実行→projectを全削除→src内のhtmlをコピー→終了】という流れでしょうか?

    gulp.task('default',['build'],function(){
    watch(['app/src/**/*.+(jpg|jpeg|gif|png|html|php)'], function(event){
    gulp.start(['build']);
    });
    });

    つまり、毎回フォルダごと削除して、コピーしているという認識で間違いないですか?

    キャンセル

  • 2016/12/03 23:37

    > 毎回フォルダごと削除して、コピーしているという認識で間違いないですか?
    そうです。
    fs(ファイルシステム)モジュールを呼び出して、app/srcとapp/project配下のファイル一覧をずらずら出して関係ないファイルを捨ててという処理を書くのは面倒なので、
    さっさとディレクトリごと捨ててしまって作り直すのが(パフォーマンスは悪いが)分かりやすいですからね。

    gulp.watchと併用する場合の作戦は回答文を追記します。

    キャンセル

  • 2016/12/03 23:53 編集

    追記部分反映しました。

    キャンセル

  • 2016/12/04 15:10

    ありがとうございました。
    頂いたソースパターンでも実行してみました。

    無事にできて安心です。教えていただいた方法で同じようにimage等もできました。
    とても感謝します!ありがとうございました。

    キャンセル

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

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

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

  • CSS

    6441questions

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

  • HTML5

    4438questions

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

  • gulp

    296questions

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

  • Sass

    289questions

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