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

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

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

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

gulp

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

Q&A

解決済

1回答

4476閲覧

Sassをgulpで自動コンパイルしたい

yesman

総合スコア21

Sass

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

gulp

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

0グッド

0クリップ

投稿2019/02/19 16:03

編集2019/02/20 11:46

Sassをgulpで自動コンパイルしようと思っているのですが
コマンドプロクトルでgulp sass:watchで入力して監視させたいのですが
エラー文がでて、できません
何か間違っているのでしょうか?
ご確認お願い致します。

コマンドプロンプト C:\Users\yesma\Desktop\test_project> gulp sass:watch [00:30:48] Using gulpfile ~\Desktop\test_project\gulpfile.js [00:30:48] Starting 'sass:watch'... [00:30:48] 'sass:watch' errored after 3.68 ms [00:30:48] Error: watching ./sass/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) at Gulp.watch (C:\Users\yesma\Desktop\test_project\node_modules\gulp\index.js:28:11) at C:\Users\yesma\Desktop\test_project\gulpfile.js:11:8 at taskWrapper (C:\Users\yesma\Desktop\test_project\node_modules\undertaker\lib\set-task.js:13:15) at bound (domain.js:395:14) at runBound (domain.js:408:12) at asyncRunner (C:\Users\yesma\Desktop\test_project\node_modules\async-done\index.js:55:18) at process._tickCallback (internal/process/next_tick.js:61:11)
package.json { "name": "test_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.4.7", "css-mqpacker": "^7.0.0", "gulp": "^4.0.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.0.9", "gulp-sourcemaps": "^2.6.4" } }
gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob');//①「gulp-sass-glob」を読み込み var sourcemaps = require('gulp-sourcemaps');//「gulp-sourcemaps」を読み込み var autoprefixer = require('autoprefixer');//「autoprefixer」を読み込み var mqpacker = require('css-mqpacker');//①「css-mqpacker」を読み込み sass.compiler = require('node-sass'); gulp.task('sass', function () { return gulp.src('./sass/**/*.scss') .pipe(sourcemaps.init())//②「gulp.src」の直後に指定 .pipe(sassGlob())//②「sass」の前に指定 .pipe(sass().on('error', sass.logError)) .pipe(sass({outputStyle: 'expanded'})) .pipe(postcss([mqpacker()]))//②「sass」の後に指定 .pipe(postcss([autoprefixer()]))//②「sass」の後に指定 .pipe(sourcemaps.write())//③「gulp.dest」の直後に指定 .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); });

イメージ説明

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

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

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

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

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

miyabi_takatsuk

2019/02/20 05:32

gulpfile.jsを含めた、ディレクトリ構造も、画像でいいので質問に含めてください。 あと、:などのメタ文字って、関数名とかに含めない方がいいですよ。 (エラーの原因になりますので)
yesman

2019/02/20 11:50

ご連絡ありがとうございます。 すいません。:などのメタ文字の事ですが、どの箇所を指しているか教えていただけないでしょうか?
guest

回答1

0

ベストアンサー

回答の準備

まず、以下のようなディレクトリ構造を作成し、

test_project ├ node_modules ├ sass │ ├ reset │ │ └ _reset.scss │ └ style.scss ├ gulpfile.js └ package.json

package.jsonを以下のように、

JSON

1{ 2 "name": "test_project", 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 "autoprefixer": "^9.4.7", 14 "css-mqpacker": "^7.0.0", 15 "gulp": "^4.0.0", 16 "gulp-postcss": "^8.0.0", 17 "gulp-sass": "^4.0.2", 18 "gulp-sass-glob": "^1.0.9", 19 "gulp-sourcemaps": "^2.6.4" 20 }, 21 "dependencies": {} 22}

gulpfile.jsを以下のように、

JavaScript

1'use strict'; 2 3var gulp = require('gulp'); 4var sass = require('gulp-sass'); 5var sassGlob = require('gulp-sass-glob');//①「gulp-sass-glob」を読み込み 6var sourcemaps = require('gulp-sourcemaps');//「gulp-sourcemaps」を読み込み 7var autoprefixer = require('autoprefixer');//「autoprefixer」を読み込み 8var mqpacker = require('css-mqpacker');//①「css-mqpacker」を読み込み 9sass.compiler = require('node-sass'); 10 11gulp.task('sass', function () { 12 return gulp.src('./sass/**/*.scss') 13 .pipe(sourcemaps.init())//②「gulp.src」の直後に指定 14 .pipe(sassGlob())//②「sass」の前に指定 15 .pipe(sass().on('error', sass.logError)) 16 .pipe(sass({outputStyle: 'expanded'})) 17 .pipe(postcss([mqpacker()]))//②「sass」の後に指定 18 .pipe(postcss([autoprefixer()]))//②「sass」の後に指定 19 .pipe(sourcemaps.write())//③「gulp.dest」の直後に指定 20 .pipe(gulp.dest('./css')); 21}); 22 23gulp.task('sass:watch', function () { 24 gulp.watch('./sass/**/*.scss', ['sass']); 25});

./sass/style.scssを以下のように、

SCSS

1@import './reset/reset'; 2 3body { 4 font: 100% Helvetica, sans-serif; 5 background-color: #efefef; 6}

./sass/reset/reset.scssを以下のようにしました。

SCSS

1html, 2body, 3ul, 4ol { 5 margin: 0; 6 padding: 0; 7}

ここで、sass:watchタスクを実行すると、以下のようにエラーが再現しました。

bash

1C:\Users\s8_chu\Desktop\test_project>npx gulp sass:watch 2[21:19:50] Using gulpfile ~\Desktop\test_project\gulpfile.js 3[21:19:50] Starting 'sass:watch'... 4[21:19:50] 'sass:watch' errored after 2.47 ms 5[21:19:50] Error: watching ./sass/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) 6 at Gulp.watch (C:\Users\s8_chu\Desktop\test_project\node_modules\gulp\index.js:28:11) 7 at C:\Users\s8_chu\Desktop\test_project\gulpfile.js:25:8 8 at taskWrapper (C:\Users\s8_chu\Desktop\test_project\node_modules\undertaker\lib\set-task.js:13:15) 9 at bound (domain.js:396:14) 10 at runBound (domain.js:409:12) 11 at asyncRunner (C:\Users\s8_chu\Desktop\test_project\node_modules\async-done\index.js:55:18) 12 at process._tickCallback (internal/process/next_tick.js:61:11) 13

回答

上記のエラー文に書かれているとおり、gulp 4.x からは、gulp.watchの取る引数が変更されました
これにより、gulp.watchに設定している引数の値が gulp に理解できない状態になっていることが、今回のエラーの原因です。 gulp の API ドキュメントを読むと、gulp 4.x からは、gulp.watch(globs[, opts][, fn])のように引数を取ることがわかります。
gulp 3.9.1 の場合

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

Watch files and do something when a file changes. This always returns an EventEmitter that emits change events.

参考: gulp/API.md at v3.9.1 · gulpjs/gulp · GitHub

gulp 4.0.0 の場合

gulp.watch(globs[, opts][, fn])

Takes a path string, an array of path strings, a glob string or an array of glob strings as globs to watch on the filesystem. Also optionally takes options to configure the watcher and a fn to execute when a file changes.

参考: gulp/API.md at v4.0.0 · gulpjs/gulp · GitHub

そのため、今回の質問文のコードを以下のように変更することで、

JavaScript

1'use strict'; 2 3var gulp = require('gulp'); 4var sass = require('gulp-sass'); 5var sassGlob = require('gulp-sass-glob'); 6var sourcemaps = require('gulp-sourcemaps'); 7var autoprefixer = require('autoprefixer'); 8var mqpacker = require('css-mqpacker'); 9var postcss = require('gulp-postcss'); 10sass.compiler = require('node-sass'); 11 12gulp.task('sass', function () { 13 return gulp.src('./sass/**/*.scss') 14 .pipe(sourcemaps.init()) 15 .pipe(sassGlob()) 16 .pipe(sass().on('error', sass.logError)) 17 .pipe(sass({outputStyle: 'expanded'})) 18 .pipe(postcss([mqpacker()])) 19 .pipe(postcss([autoprefixer()])) 20 .pipe(sourcemaps.write()) 21 .pipe(gulp.dest('./css')); 22}); 23 24gulp.task('sass:watch', function () { 25 gulp.watch('./sass/**/*.scss', gulp.series('sass')); // 変更 26});

gulp:watchタスクがエラーなく行えるようになると思います。

bash

1C:\Users\s8_chu\Desktop\test_project>npx gulp sass:watch 2[21:29:19] Using gulpfile ~\Desktop\test_project\gulpfile.js 3[21:29:19] Starting 'sass:watch'... 4[21:30:37] Starting 'sass'... 5[21:30:37] Finished 'sass' after 120 ms

また、質問文のpackage.jsonの場合、sassタスクを実行するためにgulp-postcssパッケージをインストールしておく必要があると思います。

bash

1npm i -D gulp-postcss

投稿2019/02/20 12:40

編集2019/02/20 12:51
s8_chu

総合スコア14731

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

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

yesman

2019/02/20 14:44

ありがとうございます。 postcssをインストールして試してみたらできました! 分かりやすい解説もあり、すごい勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問