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

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

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

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jade

Jade(ジェイド)は、Hamlに影響を受けて開発されたJST(JavaScript Templates)のひとつです。Node.jsで動かすことができます。

gulp

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

Q&A

解決済

1回答

2356閲覧

jadeと同じディレクトリにhtmlを出力させたい

muro

総合スコア99

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jade

Jade(ジェイド)は、Hamlに影響を受けて開発されたJST(JavaScript Templates)のひとつです。Node.jsで動かすことができます。

gulp

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

0グッド

0クリップ

投稿2015/06/12 06:36

gulpfile.jsの書き方についての質問です。
gulp.jsを使ってjade保存時にhtmlを出力させているのですが、そのときにhtmlが出力されるパスを、jadeと同じ場所にしたいと思っています。

例として、以下のようなディレクトリ構造で作業しているとします。

ルート
└node_modules
└gulpfile.js
└index.jade
└フォルダ1
│└index.jade
└フォルダ2
└index.jade

それぞれのフォルダにあるjadeを保存したときに、以下のように出力されてほしいと思っています。

ルート
└node_modules
└gulpfile.js
└index.jade
└index.html
└folder1
│└index.jade
│└index.html
└folder2
└index.jade
└index.html

上記を実現するためにgulpfile.jsを編集しているのですが、以下のような書き方の場合だと、ルートにあるjadeしか認識してくれません。

lang

1# coffeescript 2 3gulp = require('gulp') 4plumber = require('gulp-plumber') 5jade = require('gulp-jade') 6 7gulp.task 'jade', -> 8 gulp.src('*.jade') 9 .pipe(plumber()) 10 .pipe(jade( 11 pretty: true 12 )) 13 .pipe gulp.dest('./') 14gulp.task 'default', -> 15 gulp.watch '*.jade', ['jade'] 16

そこで、以下のようにtaskとwatchの部分を書き足せば、それぞれのフォルダのjadeを認識することはできるのですが、この場合だとフォルダが増えるたびにgulpfile.jsを書きなおさないといけないため、もし大規模なプロジェクトになった場合は修正が大変です。

lang

1# coffeescript 2 3gulp = require('gulp') 4plumber = require('gulp-plumber') 5jade = require('gulp-jade') 6 7gulp.task 'jade', -> 8 gulp.src('*.jade') 9 .pipe(plumber()) 10 .pipe(jade( 11 pretty: true 12 )) 13 .pipe gulp.dest('./') 14gulp.task 'jade_folder1', -> 15 gulp.src('folder1/*.jade') 16 .pipe(plumber()) 17 .pipe(jade( 18 pretty: true 19 )) 20 .pipe gulp.dest('./folder1') 21gulp.task 'jade_folder2', -> 22 gulp.src('folder2/*.jade') 23 .pipe(plumber()) 24 .pipe(jade( 25 pretty: true 26 )) 27 .pipe gulp.dest('./folder2') 28gulp.task 'default', -> 29 gulp.watch '*.jade', ['jade'] 30 gulp.watch 'folder1/*.jade', ['jade_folder1'] 31 gulp.watch 'folder2/*.jade', ['jade_folder2']

よって、どのフォルダにあるjadeも認識し、そのjadeと同じフォルダにhtmlを出力させる、できるだけ簡潔なgulpfile.jsの書き方は無いでしょうか?

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

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

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

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

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

guest

回答1

0

自己解決

自己解決いたしました。
下記のコードでjadeと同じディレクトリにhtmlを出力できました。

lang

1gulp = require('gulp') 2plumber = require('gulp-plumber') 3jade = require('gulp-jade') 4 5gulp.task 'jade', -> 6 gulp.src('**/*.jade') 7 .pipe plumber() 8 .pipe jade 9 pretty: true 10 .pipe gulp.dest('./') 11gulp.task 'default', -> 12 gulp.watch '**/*.jade', ['jade']

また、以下のページが参考になりました。
gulpで出力元のディレクトリ構造を保ったまま出力する方法

投稿2015/07/09 02:06

編集2015/07/09 02:32
muro

総合スコア99

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

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

muro

2015/07/09 03:05

すみません。 あとになって気づきましたが上記コードだと、何か一つjadeの更新が行われていると、すべてのjadeのコンパイルが行われ、すべてのhtmlが出力されてしまいました。 更新したjadeにだけ対応させる方法は、まだわかっていません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問