Gulp・Node.jsを使ってScssのコンパイルをしたいです！

Question

前提・実現したいこと

######Gulpを使ってコンパイルをしたいです。

今まで、Preprosという簡易的にSassのコンパイルができるソフトを使用しており、
今回Gulpを使用するのが初めてで、家で色々試しているのですが、完全に挫折してしまいました…。

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

このサイトを（https://ics.media/entry/3290/）見ながら
Node.jsのインストールをし、
ターミナルでjsonファイル2種と、node_modulesフォルダ
が自動的に制作される、また自分でgulpfile.jsを作り、下記のコードを記載する
ところまではたどり着き、
一旦、/css/配下にscssのコンパイルしたcssファイルが生成されたのですが、
翌日またscssを追加しても、コンパイルされなくなりました。

※watchは使っていません。使ったほうがいいのでしょうか…？watchを使った場合、/css/以下にコンパイル後のcssファイルを作ることはできますか？初心者すぎて申し訳ありません＞＜

【⬇︎gulpfile.jsの中の記述】

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function () {
    // style.scssファイルを取得
    return (
        gulp
        .src("css/style.scss")
        // Sassのコンパイルを実行
        .pipe(sass())
        // cssフォルダー以下に保存
        .pipe(gulp.dest("css"))
    );
});

######もう一点お聞きしたいこと
また、このままでうまくコンパイルがされたとしても、
この方法では、
/public_html/css/配下のコンパイルしかできないらしく、
今後/public_html/company/css/などの配下のコンパイルもしたいので、
そちらもどの様に記載すればいいのかをお聞きしたく、
こちらに質問をさせて頂きました。

本当に初心者で申し訳ありません；；
色々と間違っていそうなので、正しい方法や最新の方法等教えていただけましたら幸いです。
お手数お掛け致しますが、何卒宜しくお願いいたします…！

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

package.jsonのバージョン："version": "1.0.0",
Node.jsのバージョン：12.16.2 LTS

Answer 1

scssファイルをcssフォルダに置いているのですか？
不思議なことしてますね。

私だったら、フォルダ毎(company、recruit)にタスクを分けます。
フォルダ毎に設定（圧縮するしない）とかログメッセージとか変えられますから。

const compile_sass1 = function () {
  return src('./company/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}).on("error(company)", sass.logError))
    .pipe(dest('./company'));
};

const compile_sass2 = function () {
  return src('./recruit/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on("error(recruit)", sass.logError))
    .pipe(dest('./recruit'));
};

module.exports = series(compile_sass1, compile_sass2);

Answer 2

今私が使っているソース（の抜粋）はこんな感じ。
source/stylesheets/配下の全てのscssをコンパイル圧縮してpublic/stylesheets/配下へ。
ちなみにgulp.task()はもう非推奨なので使いません。（そのうち使えなくなる？）
あなたのディレクトリ構成に置き換えてみてください。

const compile_sass = function () {
    return src('./stylesheets/**/*.scss', { cwd: './source' })
        .pipe(sass({outputStyle:'compressed'}).on("error", sass.logError))
        .pipe(dest('./stylesheets', { cwd: './public' }));
};

watchでフォルダを監視しても、結局同じタスクを動かすのだから問題なし。
watchは便利ですが、とりあえずgulpの基本を身につけてからでもいいと思います。

Comments

[kahosayshello]

ご回答ありがとうございます！！
またキャプチャまでいただき、ありがとうございます！

今までの私のディレクトリの作り方は、全てuniq.css、uniq.scss共に（例えば会社概要のページであれば、ディレクトリが/company/の時、/company/配下のユニークのスタイル）は全て/company/配下の/css/のなかに入れるなどを以前の会社で行ってきたのですが、Gulpはそれらの指定はできないのでしょうか…？
各ディレクトリフォルダごとの配下に/css/ファイルを生成するということです＞＜

会社概要のページなら
/company/css/uniq.css
/company/css/uniq.scss

採用情報のページなら、
/recruit/css/uniq.css
/recruit/css/uniq.scss

また、Gulpの指定さえうまくいっていれば、
watchを使わなくてもhoge.scssを保存するだけで、自動でcssにコンパイルはしてくれるのでしょうか？

質問ばかり申し訳ございません…！
お手すきの際に宜しくお願いいたします＞＜