タイトルの通り、gulpでsassのコンパイル設定がうまくいかなくて悩んでいます。
gulpfile.jsとpackage.jsonの設定は下記です。
下記の設定でbrowserSyncのみうまく機能しページが表示されます。
※6/7追記しました。
下記参考サイトを参考にコンパイルエラーの設定をやってみましたがそれでもでませんでした。
というより、エラーもでないのでコンパイルに成功しているように思えます。。
js
1var gulp = require('gulp'); 2var browserSync = require('browser-sync'); 3var sass = require('gulp-sass'); 4var plumber = require('gulp-plumber'); 5var sourcemaps = require('gulp-sourcemaps'); 6var notify = require("gulp-notify"); 7 8gulp.task('browser-sync', function (done) { 9 browserSync({ 10 port: 2222, 11 proxy: "ドメイン", 12 }); 13 done(); 14}); 15 16gulp.task('reload', function (done) { 17 browserSync.reload(); 18 done(); 19}); 20 21gulp.task('sass', function (done) { 22 gulp.src('html/common/scss/**/*.scss') 23 .pipe(plumber()) 24 .pipe(sourcemaps.init()) 25 .pipe(sass({ outputStyle: 'compressed', errLogToConsole: false })) 26 .pipe(sourcemaps.write('../css/')) 27 .pipe(gulp.dest('html/common/css/')); 28 errorHandler: notify.onError({ 29 title: "失敗してるよ!", // 任意のタイトルを表示させる 30 message: "<%= error.message %>" // エラー内容を表示させる 31 }) 32 done(); 33}); 34 35gulp.task('watch', function (done) { 36 gulp.watch("html/common/scss/**/*.scss", gulp.parallel('sass')); 37 gulp.watch("../html/**/*", gulp.parallel('reload')); 38 done(); 39}); 40 41gulp.task('default', gulp.parallel('browser-sync', 'watch', 'sass'));
npm run gulp
で動かしてみると下記のようにでて成功しているように思えます。
ただ、試しにsassファイルをコンパイルしてくれません。
下記は試しに適当な.scssを保存した時にターミナルに表示される文面です。
成功しているようですが、やっぱり.cssに吐き出してくれません。
[12:50:59] Starting 'reload'... [12:50:59] Finished 'reload' after 1.32 ms [Browsersync] Reloading Browsers...
なにかアドバイスいただけると助かります。
のちほど情報追記していきます。
回答1件
あなたの回答
tips
プレビュー