質問: [ require('postcss-import'), require('postcss-cssnext')({ browsers: [ 'last 2 version', 'iOS >= 8.1', 'Android >= 4.4', ], }), //ソースではわからないが、IE9以上は、remが使えるので、remからpxを生成されないように、こちらで行っている require('csswring') ]; gulp.task("css", function(){ //return gulp.srcのreturnは上から順番に処理するという意味 gulp.src('./src-before/**/*.css') .pipe(postcss(plugins))//PostCSSにファイルを処理してもらう。pluginsは変数 .pipe(gulp.dest('./dest-after/css'));//生成されたCSSの排出先。dest-after/cssの中に配置 }); gulp.task('watch', function(){ gulp.watch(['dest-after/index.html', 'dest-after/js/*', 'src-before/**/*' , 'src-before/**/**/*'], ["css"]); }); // ブラウザシンク //ローカルサーバーを立て、 //ファイル更新時に自動リロードするタスクです gulp.task("server", function () { //初期設定です gulp.task("server", function () { browserSync.init({ server: { baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。 }, files: [ "dest-after/index.html", "dest-after/js/*.js", "dest-after/app.css", ] }); }); // browserSync.init({ // server: { // baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。 // } // }); gulp.watch (['dest-after/index.html', 'dest-after/js/*', 'src-before/**/**/*'], browserSync.reload); }); // 左で指定したファイルに変更があったら下記のブラウザシンクを更新するように指定する。 gulp.task("default", ["watch", "server"]); ```
回答: BrowserSyncのCSSリロードについては、毎回ページごとリロードするのではなく、ファイルの更新の際にCSSのみ差し替える事が可能です。 (`browserSync.reload`はたしかBS上で開いているすべてのページをリロードしますよね。) BrowserSync初期化時の`files`オプションや、`browserSync.stream`を用いることでこれが可能です。 個人的にはfilesオプションを使用するほうが手軽で確実かと思ってます。 たとえば最小限のgulpfileだとこんな感じ。 ``` const bs = require("browser-sync"); const gulp = require("gulp"); gulp.task("serve", e=>{ bs.init({ server: { baseDir: "." }, files: [ "app.css", "**/*.html" ] }); }); ``` app.cssが更新されるとapp.cssが動的に差し替えられ、index.htmlが更新されれば開いているindex.htmlがリロードされます。 提示されたgulpfileであれば、 ``` gulp.task("server", function () { browserSync.init({ server: { baseDir: "./dest-after/" }, files: [ "dest-after/index.html", "dest-after/js/*.js", "dest-after/app.css", ] }); }); ``` のように書けば適切にライブリロードされるのではないでしょうか。