私はGulpが初めてで、その自動scssコンパイルとブラウザー同期を利用したかったのです。しかし、私はそれを動作させることができません。
Browsersync Webサイトにある例の内容のみを残すために、すべてを削除しました。
http://www.browsersync.io/docs/gulp/#gulp-sass-css
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Gulp serveと呼ぶことができます。サイトが表示され、Browsersyncからメッセージが表示されます。 HTMLを変更すると、ページがリロードされます。ただし、scssを変更すると、次のように表示されます。
[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms
しかし、手動でリロードする必要があります。私は何が欠けていますか?
必要に応じて、SASSコンパイル時にブラウザ全体を強制的に更新する代わりに、変更を挿入するだけで済みます。
browserSync.init({
injectChanges: true,
server: "./app"
});
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream({match: '**/*.css'}));
});
ブラウザ同期の使用に慣れていなかったときにも同様の問題に直面しました。コマンドラインに「ブラウザの再読み込み」と表示されていましたが、ブラウザはまったく更新されませんでした。 browser-syncは、その機能のためにスクリプトを挿入できます。HTMLページにbodyタグがあることを確認してください。
これは、scsウォッチではなく、htmlウォッチでbrowserSync.reload
を呼び出しているためです。
これを試して:
gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);
これは私が使用するものであり、sassまたは他のファイルで正常に動作します
gulp.task('browser-sync', function () {
var files = [
'*.html',
'css/**/*.css',
'js/**/*.js',
'sass/**/*.scss'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
php
ファイルとjs
ファイルをリロードし、css
ファイルをストリーム配信しようとして、この同じ問題に遭遇しました。 pipe
メソッドを使用することによってのみストリームを使用できましたが、これは理にかなっています。とにかく、ここに私のために働いたものがあります:
gulp.watch(['./**/*.css']).on('change', function (e) {
return gulp.src( e.path )
.pipe( browserSync.stream() );
});
しかし、私は実際に@pixieの回答を修正した方が好きです
gulp.task('default', function() {
var files = [
'./**/*'
];
browserSync.init({
files : files,
proxy : 'localhost',
watchOptions : {
ignored : 'node_modules/*',
ignoreInitial : true
}
});
});
私も同じ問題を抱えていました。 reloadメソッドを別のタスクとして呼び出したときに機能しました。
gulp.task('browserSync', function() {
browserSync.init(null, {
server: {
baseDir: './'
},
});
})
gulp.task('reload', function(){
browserSync.reload()
})
gulp.task('watch', ['sass', 'css', 'browserSync'], function(){
gulp.watch('*.html', ['reload']);
})
CLIを使用する場合、HTMLメインファイルにスクリプトが挿入されていないことがあるため、これを手動で追加するか、gulpを使用する必要があります。
<!-- START: BrowserSync Reloading -->
<script type='text/javascript' id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("Host", location.hostname));
//]]>
</script>
<!-- END: BrowserSync Reloading -->
これをHTMLのbodyタグのすぐ下に含めます。できます。
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://Host:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("Host", location.hostname));//]]>
</script>