gulpを使ったSassのコンパイル先の指定方法について

Question

前提・実現したいこと

gulpを使って、sassのコンパイルを自動で行い、生成後のファイルがcssフォルダ内に生成されるようにしたいです。

---

【プロジェクトファイル】
index.html
-scss【1】
-style.scss
-css【2】
-style.css
-js
gulpfile.js
package.json

【1】のフォルダ内で作成したsassファイルをコンパイルすると【2】のCSSフォルダ内に生成される

発生している問題・エラーメッセージ

【1】のフォルダ内にcssファイルが生成されてしまいます。

---

【プロジェクトファイル】
index.html
-scss【1】
-style.scss
-style.css　✕
-css【2】
-js
gulpfile.js
package.json

ファイルのコンパイル、watchでの監視は正常に機能しますが、ファイルの生成先だけがうまく指定できません。

該当のソースコード

gulpfile.jsには下記のように記述をしています。

---

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('default', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./css'))
});

gulp.task('default', function() {
gulp.watch('./sass/**/*.scss', gulp.task('default'));
});

---

.pipe(gulp.dest('./css'))

この記述部分によって、cssフォルダ内に生成されると認識していますが、どうしてもscssファイルと同一のフォルダへファイルが生成されてしまいます。

補足情報（FW/ツールのバージョンなど）

gulp
CLI version: 2.2.0
Local version: 4.0.2

node.js
v12.14.1

os
windows10

jsに対する知識はほぼありません。

回答よろしくお願いいたします。

Answer 1

こちらのページ内でのやり取りを実行すれば問題は解決しました。

ただし、gulpを使用する前に「VScode」拡張機能「EasySass」を使用していた方は注意が必要です。

私の場合、まずはじめにEasySassによるコンパイルを行っていました。その後、将来的な拡張性を考え、gulpを実行したところ、当ページの問題が発生しました。

結論からいうとgulpを導入する際にEasySassの機能を停止し、念のためアンインストールまで行いましたが、EasySassの影響を受けていました。

EasySassの機能を停止した後は、VScodeを再起動、それでも影響を受ける場合はPC内にある残っているEasySassの関連ファイルをすべて削除したところ、すべての問題が解決しました。

参考として書き残しておきます。

Answer 2

似たような処理を書いてみて動いたので参考にしてください

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const task_sass = () => {
    return src('./src/**/*.scss')
                .pipe(sass({outputStyle: 'expanded'}))
                .pipe(dest('./dest'));
};

exports.runsass = task_sass;

実行方法
$ npm run gulp runsass

コンパイル結果

.src/
  sample.scss
  base/
    base.scss


.dest/
  sample.css
  base/
    base.css

.src配下のscssファイルが.dest配下にコンパイルされました。

Comments

[hyhpsk]

PC触れる状況になったらすぐに試してみます！

ちなみにこの場合、srcフォルダとdestというフォルダを作成しておけばよいのでしょうか？
本当に知識がなく申し訳ありません。。

[technocore]

＞ちなみにこの場合、srcフォルダとdestというフォルダを作成しておけばよいのでしょうか？

あなたがフォルダを用意しているので、私もそれに合わせてスクリプトを書きました。フォルダ名はあなたの環境に合わせてください。

[hyhpsk]

昨日、ご丁寧な対応ありがとうございました。

教えて頂いたコードを試したところ無事問題を解決できました！
本当にありがとうございました！

Answer 3

gulp.src('./sass/**/*.scss')

ソースはscssフォルダ
出力先はcssフォルダなのに
「sass」は何を指しているのですか？

単純に
src('./scss/*.scss')
pipe(dest('./css')
ではだめですか？

Comments

[hyhpsk]

ご質問ありがとうございます！

src部分（scss）のディレクトリ構成ですが、これは後々修正がしやすいようにscssのファイルを細かくわけようと考えたためこのような構成を考えておりました。
【scss】
　-base
--base.scss
--reset.scss
-setting
--_color.scss
--_size.scss
--_typofraphy.scss
-module
-page

参考：http://tsudoi.org/guide/detail/8.html

gulp.src('./scss/**/*.scss')　の記述であれば、上記の構成に対しても対応ができると考えこのような書き方をしております。

説明不足ですいません！

（※）ご指摘頂きコメント部分修正しました。

[technocore]

gulpfile.jsと同じ場所にscssフォルダとcssフォルダはあるようですが、sassフォルダはありません。
「sass」は何を指しているのですか？

[hyhpsk]

上記で頂いた形で修正をしてみましたが、同様にscssフォルダの中にファイルが生成されてしまいます。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('default', function() {
return gulp.src('./scss/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./css'))
});

gulp.task('default', function() {
gulp.watch('./scss/*.scss', gulp.task('default'));
});

[hyhpsk]

すいません！入れ違いになってしまいました！
ファイル名間違えていたかもです！！！滝汗

修正してみます！！

[hyhpsk]

すいません、これはメッセージの記述ミスですね。。。

【scss】
　-base
--base.scss
--reset.scss
-setting
--_color.scss
--_size.scss
--_typofraphy.scss
-module
-page

理想はこのような感じで作りたいです。