タスクランナー「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'...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。