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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

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

Sass

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

gulp

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

Q&A

2回答

524閲覧

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

kahosayshello

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

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

Sass

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

gulp

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

0グッド

0クリップ

投稿2020/04/24 12:54

前提・実現したいこと

######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

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

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

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

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

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

guest

回答2

0

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);

投稿2020/04/24 15:46

technocore

総合スコア7200

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

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

0

今私が使っているソース(の抜粋)はこんな感じ。
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の基本を身につけてからでもいいと思います。
イメージ説明

投稿2020/04/24 13:47

technocore

総合スコア7200

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

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

kahosayshello

2020/04/24 14:40

ご回答ありがとうございます!! またキャプチャまでいただき、ありがとうございます! 今までの私のディレクトリの作り方は、全て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にコンパイルはしてくれるのでしょうか? 質問ばかり申し訳ございません…! お手すきの際に宜しくお願いいたします><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問