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

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

新規登録して質問してみよう
ただいま回答率
85.35%
ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

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

gulp

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

Q&A

0回答

508閲覧

gulp インストール sass コンパイル

kengo.1214

総合スコア2

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

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

gulp

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

0グッド

0クリップ

投稿2021/08/03 10:13

編集2021/08/05 03:26

前提・実現したいこと

Gulpを使用してSassをビルドしたいです

UdemyでSassのレッスンを受講しています。

何度やり直しても同じエラーが出てしまい、試行錯誤しましたが解決方法が見つかりませんでした。

初学者という事もあり、情報が足りなかったり拙い文章ではありますがご教授していただけると幸いです。

長文になりますが何卒よろしくお願い致します


Homebrew,Nodebrewのインストールは済んでおり、Node.jsは v14.17.4 / npm v6.14.14という状態です。

Gulpの導入では、レッスンの指示通りに次の作業を行いました。

(1)gulp cliというパッケージをグローバルにインストール

$npm install --global gulp-cli ```(2)package.jsonの作成

$npm init -y

(3)ローカルにGulpをインストール ```ここに言語を入力 $ npm install --save-dev gulp

(1)(2)は記述しても正常なのですが、(3)からエラーのようなものが発生してしまいます。

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

$ npm install --save-dev gulp //以下がエラーメッセージ、警告です npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. > fsevents@1.2.13 install /Users/kobayashikengo/Desktop/sass/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN sass@1.0.0 No description npm WARN sass@1.0.0 No repository field. + gulp@4.0.2 added 327 packages from 227 contributors and audited 327 packages in 15.383s 7 packages are looking for funding run `npm fund` for details found 3 vulnerabilities (1 low, 2 moderate) run `npm audit fix` to fix them, or `npm audit` for details

このメッセージを無視して、Sassをビルドするパッケージのgulp sassをインストールすると似たようなメッセージが出ます

$ npm install -save-dev gulp-sass npm WARN sass@1.0.0 No description npm WARN sass@1.0.0 No repository field. + gulp-sass@5.0.0 added 14 packages from 12 contributors and audited 341 packages in 2.101s 9 packages are looking for funding run `npm fund` for details found 3 vulnerabilities (1 low, 2 moderate) run `npm audit fix` to fix them, or `npm audit` for details

上記のメッセージも無視して、最後にgulp buildを入力すると

$gulp build

このようなエラーメッセージが現れます

$ gulp build [19:00:14] Using gulpfile ~/Desktop/sass/gulpfile.js [19:00:14] Starting 'build'... Error in plugin "gulp-sass" Message: gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the `sass` and `node-sass` packages are permitted. For example, in your gulpfile: var sass = require('gulp-sass')(require('sass')); [19:00:14] The following tasks did not complete: build [19:00:14] Did you forget to signal async completion?

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問