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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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

Q&A

解決済

1回答

6784閲覧

Gulp で出力先を一つ上の階層にしたい

Naruki

総合スコア7

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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

0グッド

0クリップ

投稿2017/03/17 11:34

###Gulp 出力先を一つ上の階層にしたい

Gulp を使用して制作しています。
普通は開発と出力は分けて制作すると思いますが、
プロジェクトごとに Gulp をインストールしていると面倒なので
1つにまとめてやろうと考えてます。
開発ディレクトリ=公開ディレクトリのような感じにしてやろうという試み

###現在のGulp-Renameとdestの指定

gulp.task('sass', function() { gulp.src('src/**/sass/**/*.scss') .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) .pipe(frontnote()) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'expanded', sourcemap: true })) .pipe(autoprefixer({ browsers: ['last 2 version'], cascade: false })) .pipe(mmq()) .pipe(sourcemaps.write('')) .pipe(rename(function(path) { path.dirname += '/css'; })) .pipe(gulp.dest('src/')) .pipe(browser.reload({ stream: true })) });

###作業ディレクトリ構造

src ├ Project1 │ └ sass │ └ css ←ここに出力される ├ Project2 ├ Project3 │ ├ sass │ └ css ←この階層に出力したい ├ Project4 │ gulpfile.js

###sass と css の階層を同じにしたい
同様に js も いちいち開発と出力の階層を分けたくない、
作業中にフォルダの行きかいが とてもだるいのでまるごと完結したい。
この方法であれば、Gulpfile.js で指定を分ければ、
プロジェクトごとの Gulpfile.js を作れば、1つの Gulp で完結できる?
と考えています。

###gulp-rename を色々試してみたが…
上記の指定が個人的に限界でした。Node Javascript は初心者で全然理解出来ません。

.pipe(rename(function (path) { if (path.extname) { if (path.dirname === '.') { path.dirname = ''; } path.dirname = ''; } }))

海外フォーラムでこのような指定を見かけましたが理解ができなかったです。
解決策等ありましたら、教えていただきたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

現在のGulpの設定を下記のようにしてもダメでしょうか。

javascript

1// before 2.pipe(rename(function(path) { 3 path.dirname += '/css'; 4})) 5 6// after 7.pipe(rename(function(path) { 8 path.dirname += '/../css'; // 単純に今のパスに parentを追加しているだけ 9}))

今現状が、「Project1/sass/css」 として出力されるのであれば、「Project1/sass/../css(=Project/css)」 にすれば、ご希望の階層にcssディレクトリが作られると思いました。

投稿2017/03/17 14:38

tell_k

総合スコア2120

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

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

Naruki

2017/03/21 01:09

ご返答遅くなり、申し訳ございませんでした。 無事、ディレクトリの階層を上に移動させることが出来ました。 /../ と指定すれば フォルダが作成されないのですね、 dest は ** の指定をすると **フォルダが作成されてしまうので .. も ..フォルダが作成されるとばかり考えて下りました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問