#gulp4でbrowser-syncが動きません
他の言語含めて、javaScript初心者です。
参考サイトより寄せ集め、コピペで作ったgulpfile.jsです。
##現在の状態について
htdocs内のhtmlファイルを更新しても、browser-syncにより更新されません。
前半のCSSの書き出しは正常に動きます。
browser-syncは立ち上がり、サイトが表示されます。
その状態で更新をしても、変更されません。
$ npx gulp [12:59:07] Using gulpfile ~/Documents/project/p1/gulpfile.js [12:59:07] Starting 'default'... [12:59:07] Starting 'watch'... [12:59:07] Starting 'browser-sync'... watch start ********* [Browsersync] Access URLs: ------------------------------------ Local: http://localhost:3000 External: http://192.168.3.2:3000 ------------------------------------ UI: http://localhost:3001 UI External: http://localhost:3001 ------------------------------------ [Browsersync] Serving files from: htdocs
##やりたいこと
####1
wacthにて、htmlの更新によりbrowser-syncを動作させたいです。
####2 CSS更新後にもリロードしたい
のですが、下記をCSS書き出し後に追加するとSyntaxErrorになります・・・
.pipe(browserSync.reload());
ご助言お願いいたします。
####3 追伸で:ヒント頂ければ助かります・・・
独学で勉強中なのですが、例えばdefaultタスクの
console.log('point1 #############')
などはコンソールに表示されません。
通常のjavaScriptではブラウザコンソールに出るかと思います。
なぜなのか、、理解できていません。
参考になるサイト等ありましたらご助言頂けたら幸いです。
gulp
1// gulpプラグインの読み込み 2const gulp = require('gulp'); 3// Sassをコンパイルするプラグインの読み込み 4const sass = require('gulp-sass'); 5const autoprefixer = require( 'gulp-autoprefixer' ); 6const plumber = require( 'gulp-plumber' ); 7 8//★★★ブラウザリロード 9const browserSync =require('browser-sync'); 10 11 12 13 14// デフォルト 15gulp.task('watch', () => { 16console.log('watch start *********') 17 // ★ style.scssファイルを監視 18 return gulp.watch('htdocs/css/*.scss', function () { 19 // style.scssの更新があった場合の処理 20 21 // style.scssファイルを取得 22 return gulp.src('htdocs/css/*.scss') 23 // Sassのコンパイルを実行 24 .pipe( plumber() ) // 4 25 .pipe(sass({ 26 outputStyle: 'expanded' 27 }) 28 // Sassのコンパイルエラーを表示 29 // (これがないと自動的に止まってしまう) 30 .on('error', sass.logError)) 31 32 .pipe( autoprefixer( { // 7 33 browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'], 34 cascade: false 35 } ) ) 36 37 // cssフォルダー以下に保存 38 .pipe(gulp.dest('htdocs/css')); 39 40 41 }); 42 43 44 45}); 46 47// browser-sync 48gulp.task('browser-sync', () => { 49 browserSync({ 50 server: { 51 baseDir: 'htdocs', 52 } 53 }); 54}); 55 56 57 58 59 60// default 61gulp.task('default', gulp.parallel('watch', 'browser-sync'), () => { 62console.log('point1 #############') 63gulp.watch(['htdocs/**'], gulp.task('browserSync.reload', gulp.parallel(console.log('point2 #############')))) 64 65}); 66 67 68 69
あなたの回答
tips
プレビュー