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

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

新規登録して質問してみよう
ただいま回答率
85.46%
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

解決済

1回答

8017閲覧

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

SaekoIwaki

総合スコア33

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クリップ

投稿2016/12/03 05:24

いつもお世話になっております。
最近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を吐き出すだけのサンプルを作りました。)

var

1gulp.task( 'copy', function() { 2 gulp.src( 'app/src/*.html' ).pipe( gulp.dest( 'app/project/') ); 3} ); 4/****** 省略 *****/

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

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

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

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

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

miyabi-sun

2016/12/03 09:40

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

2016/12/03 12:35

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

回答1

0

ベストアンサー

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のソースコードをちら見すれば何がしたいのかすぐわかると思います。

JavaScript

1var gulp = require('gulp'); 2var del = require('del'); 3var runSequence = require('run-sequence'); 4 5gulp.task('initialize', function() { 6 return del('app/project'); 7}); 8 9gulp.task('copy', function() { 10 gulp 11 .src('app/src/*.html') 12 .pipe(gulp.dest('app/project/')); 13}); 14 15gulp.task('build', function(done) { 16 runSequence( 17 'initialize', 18 'copy', 19 'build-scripts', 20 done); 21});

追記:gulp.watchをする場合

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

JavaScript

1gulp.task('watch', function() { 2 watch(['app/src/**/*.+(jpg|jpeg|gif|png|html|php)'], function(event){ 3 gulp.start(['build']); 4 }); 5}); 6 7gulp.task('default', ['build'], function(done) { 8 runSequence( 9 'build', 10 'watch', 11 done); 12});

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

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

Bash

1# windows:cmd http://d.hatena.ne.jp/ku__ra__ge/20081009/p7 2gulp build & gulp watch 3 4# bash http://qiita.com/wwwaltz/items/9ee247ee8fe3ab63fd27 5gulp build && gulp watch

投稿2016/12/03 10:09

編集2016/12/03 17:06
miyabi-sun

総合スコア21158

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

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

SaekoIwaki

2016/12/03 12: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']); }); }); つまり、毎回フォルダごと削除して、コピーしているという認識で間違いないですか?
miyabi-sun

2016/12/03 14:37

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

2016/12/03 17:07 編集

追記部分反映しました。
SaekoIwaki

2016/12/04 06:10

ありがとうございました。 頂いたソースパターンでも実行してみました。 無事にできて安心です。教えていただいた方法で同じようにimage等もできました。 とても感謝します!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問