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