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

Question

いつもお世話になっております。
最近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/') );
} );
/****** 省略 *****/

Comments

[miyabi-sun]

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

[SaekoIwaki]

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

Answer 1

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

Comments

[SaekoIwaki]

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

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

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

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

[miyabi-sun]

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

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

[miyabi-sun]

追記部分反映しました。

[SaekoIwaki]

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

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