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

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

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

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

gulp

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

Q&A

2回答

597閲覧

gulp sass 実行時にエラー

Misazuto

総合スコア13

Sass

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

gulp

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

0グッド

0クリップ

投稿2019/03/30 06:42

現在、独学でHTML, CSS ,JavaScriptを学習していて、昨日からSASS(Scss)の学習のを始めました。学習サイト(ビデオ)にそって必要なものをインストールし、レクチャー通りにターミナルでgulp sassを実行したところ、以下のようなエラーが出てCSSに変換されません。

エラー内容:

noMacBook-Pro:udemy_sass ***$ gulp sass

assert.js:350

throw err;

^

AssertionError [ERR_ASSERTION]: Task function must be specified

at Gulp.set [as _setTask] (/Users/***/Desktop/udemy_sass/node_modules/undertaker/lib/set-task.js:10:3)

at Gulp.task (/Users/***/Desktop/udemy_sass/node_modules/undertaker/lib/task.js:13:8)

at Object.<anonymous> (/Users/***/Desktop/udemy_sass/gulpfile.js:16:6)

at Module._compile (internal/modules/cjs/loader.js:689:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)

at Module.load (internal/modules/cjs/loader.js:599:32)

at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

at Function.Module._load (internal/modules/cjs/loader.js:530:3)

at Module.require (internal/modules/cjs/loader.js:637:17)

at require (internal/modules/cjs/helpers.js:22:18)

###gulpfile.js

gulpfile.js

1'use strict' 2 3var gulp = require('gulp'); 4var sass = require('gulp-sass'); 5 6gulp.task('sass', function(){ 7 gulp.src('./_src/sass/**/*.scss') 8 .pipe(sass({outputStyle: 'expanded'})) 9 .pipe(gulp.dest('./css')); 10}); 11 12gulp.task('watch', function(){ 13 gulp.watch('./_src/sass/**/*.scss', ['sass']); 14}) 15 16gulp.task('default',['watch']); 17

###style.scss

style.scss

1ul { 2 margin: :0 0 20px; 3 li { 4 padding:5px; 5 } 6} 7

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

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

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

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

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

guest

回答2

0

多分、あなたと同じ学習動画を見ているような気がしたので
自分の対策を書きます。
原因はバージョン違いによるもののようです。

参考
絶対つまずかないGulp 4入門(2019年版)
インストールとSassを使うまでの手順

gulpfile.js

js

1'use strict'; 2 3// gulpプラグインの読み込み 4const gulp = require('gulp'); 5// Sassをコンパイルするプラグインの読み込み 6const sass = require('gulp-sass'); 7 8 9// style.scssの監視タスクを作成する 10gulp.task('default', function() { 11 // ★ style.scssファイルを監視 12 return gulp.watch('./_src/sass/**/*.scss', function() { 13 // style.scssの更新があった場合の処理 14 15 // style.scssファイルを取得 16 return ( 17 gulp 18 .src('./_src/sass/**/*.scss') 19 // Sassのコンパイルを実行 20 .pipe( 21 sass({ 22 outputStyle: 'expanded' 23 }) 24 // Sassのコンパイルエラーを表示 25 // (これがないと自動的に止まってしまう) 26 .on('error', sass.logError) 27 ) 28 // cssフォルダー以下に保存 29 .pipe(gulp.dest('./css')) 30 ); 31 }); 32}); 33

package.json

json

1{ 2 "name": "udemy-sass", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "gulp": "^4.0.1", 14 "gulp-sass": "^4.0.2" 15 }, 16 "dependencies": {} 17} 18

実行コマンド

lang

1npx gulp

投稿2019/05/07 03:01

wa_

総合スコア55

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

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

naoki1026

2019/07/06 14:36

同じところでつまずいていました。とても参考になりました。ありがとうございます。
guest

0

gulpのバージョンは何でしょうか?
もしかしてv4だとおそらく下記になると思います。

js

1gulp.task('watch', function(){ 2 gulp.watch('./_src/sass/**/*.scss', ['sass']); 3}) 4 56 7gulp.task('watch', function(){ 8 gulp.watch('./_src/sass/**/*.scss', gulp.task('sass')); 9}) 10

ほかにも変更が必要な個所があるかもしれませんので、下記の記事が参照になると思います。
https://designsupply-web.com/knowledgeside/4410/

投稿2019/03/30 10:23

katsun0921

総合スコア32

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

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

Misazuto

2019/04/01 07:24

ありがとうございました。教えていただいた記事を参考に色々と試しましたが解決できませんでした。とりあえずgulpをアンインストールし、GUIツールのPreprosを使ってSassの学習を進めることにしました。もう少し学習をして再度Gulpをインストールして試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問