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

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

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

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

gulp

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

Q&A

解決済

1回答

2345閲覧

Gulp4 Sassコンパイル処理が1回しか自動実行されない

KZYMSMZ

総合スコア6

Sass

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

gulp

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

0グッド

0クリップ

投稿2020/01/23 09:56

編集2020/01/23 10:31

タスクランナー「Gulp 4」で「sass」自動コンパイルを作成していたのですが、
いろいろ調べてみたものの、分からないので質問させてください。

実現したいこと

開発用ディレクトリで作成したSassファイルを保存したタイミングで自動でコンパイルしたいです。

現象

gulpコマンドでwatchを開始し、1回目の保存でコンパイルは無事成功します。
ただ、そのまま2つ目、3つ目のファイル修正を行っても何も起きません。

ディレクトリ構成

_dev/sassディレクトリの構成を保ったまま、publicにコンパイル
このディレクトリ構成を保ち「css」フォルダを作成して入れるところまでの動作は問題ありません。

ROOT
┣ _dev(開発用ディレクトリ)
┃ ┗ scss
┃  ┗ sassファイル.scss
┗ public(公開ディレクトリ)
┣ common(共通ディレクトリ)
┃ ┗ css
┗ about(カテゴリーディレクトリ)

利用バージョン

CLI version: 2.2.0
Local version: 4.0.2

ソース

js

1 2/*---------------------------------- 3プラグインの読み込み 4----------------------------------*/ 5const gulp = require('gulp'); 6const sass = require('gulp-sass'); 7const sassGlob = require("gulp-sass-glob"); 8const autoprefixer =require('gulp-autoprefixer'); 9const notify = require('gulp-notify'); 10const rename = require('gulp-rename'); 11 12/*---------------------------------- 13Original 14----------------------------------*/ 15gulp.task('sassComp', function(){ 16 gulp.src('./scss/**/*.scss', {base:'scss'}) 17 .pipe(sassGlob()) 18 // Sassコンパイル 19 .pipe(sass({outputStyle: 'expanded'})).on('error', sass.logError) 20 // ベンダープレフィックス自動付与 21 .pipe(autoprefixer([ 22 'last 3 versions', 'ie >= 9', 'Android >= 4', 'iOS >= 8' 23 ])) 24 // パスにCSSディレクトリ名を付与(無ければ作成) 25 .pipe(rename(function (path) { 26 path.dirname += '/css'; 27 })) 28 .pipe(gulp.dest('../')); 29}); 30 31/*---------------------------------- 32デフォルトTASK 33----------------------------------*/ 34gulp.task("default", function () { 35 gulp.watch('./scss/**/*.scss', gulp.task('sassComp')); 36});

よろしくおねがいします。

##ターミナル状態
sassCompのタスクがFinishになっていない。
でもエラーなどは表示しない状態です。

code

1[19:29:29] Starting 'default'... 2[19:29:39] Starting 'sassComp'...

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

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

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

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

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

guest

回答1

0

自己解決

すいません。自己解決しました。
task自体を「return」したことで、先に進み無事解決しました。
失礼いたしました。

js

1gulp.task("sass", function () { 2 return gulp.src('./scss/**/*.scss', {base:'scss'}) 3下記、省略

投稿2020/01/23 11:26

KZYMSMZ

総合スコア6

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問