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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

CSS

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

gulp

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

Q&A

0回答

954閲覧

VSCODEを使ってGulp4でSCSSをコンパイルしたい

homepage-site

総合スコア50

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

CSS

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

gulp

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

0グッド

1クリップ

投稿2021/08/09 17:15

前提・実現したいこと

SCSSをCSSファイルにコンパイルしたい

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

Task never defined:default

To list available tasks,

try running : gulp-- tasks

試したこと

nvm-setup.zipでnvmインストール

nvm list availableで最新のNode.jsをインストール

nvm 14.17.4

npm -vでバージョン確認 7.20.3

「gulp-test」というフォルダをデスクトップに作成

gulp-testフォルダの直下に_gulpフォルダを作成して
C:\Users\user\Desktop\gulp-test_gulpまでのパスを通す

npm init -yを実行してpackage.jsonファイル作成

npm i gulp gulp-dart-sass gulp-plumber gulp-notify browser-syncでdart rssのパッケージインストール

gulpfile.jsを、_gulpフォルダの直下に作成

const gulp = require('gulp');//gulp本体 //scss const sass = require('gulp-dart-sass');//Dart Sass はSass公式が推奨 @use構文などが使える const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない const notify = require("gulp-notify"); // エラー発生時のアラート出力 const browserSync = require("browser-sync"); //ブラウザリロード // 入出力するフォルダを指定 const srcBase = '../_static/src'; const assetsBase = '../_assets'; const distBase = '../_static/dist'; const srcPath = { 'scss': assetsBase + '/scss/**/*.scss', 'html': srcBase + '/**/*.html' }; const distPath = { 'css': distBase + '/css/', 'html': distBase + '/' }; /** * sass * */ const cssSass = () => { return gulp.src(srcPath.scss, { sourcemaps: true }) .pipe( //エラーが出ても処理を止めない plumber({ errorHandler: notify.onError('Error:<%= error.message %>') })) .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed .pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先 .pipe(browserSync.stream()) .pipe(notify({ message: 'Sassをコンパイルしました!', onLast: true })) } /** * html */ const html = () => { return gulp.src(srcPath.html) .pipe(gulp.dest(distPath.html)) } /** * ローカルサーバー立ち上げ */ const browserSyncFunc = () => { browserSync.init(browserSyncOption); } const browserSyncOption = { server: distBase } /** * リロード */ const browserSyncReload = (done) => { browserSync.reload(); done(); } /** * * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す * series 順番に実行 * watch('監視するファイル',処理) */ const watchFiles = () => { gulp.watch(srcPath.scss, gulp.series(cssSass)) gulp.watch(srcPath.html, gulp.series(html, browserSyncReload)) } /** * seriesは「順番」に実行 * parallelは並列で実行 */ exports.default = gulp.series( gulp.parallel(html, cssSass), gulp.parallel(watchFiles, browserSyncFunc) );

コマンドプロンプトにnpx gulpを入力してコンパイル失敗。
Task never defined:default

To list available tasks,

try running : gulp-- tasks

が表示される。
イメージ説明

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

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

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

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

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

showkit

2021/08/09 22:50

vscode の拡張機能を使って、scss をコンパイルするのは、まずいのですか?
homepage-site

2021/08/10 08:24

画像の自動圧縮 Babelを使用したJSのコンパイル webpackと一緒に使ってJSをバンドルして圧縮する などの機能を実装する場合、VsCodeのLive Sass Compilerで足りないからですかね。 VsCodeのLive Sass Compilerでも問題はないと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問