browser-sync でカレントディレクトリ以下にないファイルも監視したい
のつづき
その後試行錯誤の結果何 何とかcssの変更を感知するところまでは来ているのですが、index.htmlだけリロードしてくれてcssはしてくれません。
現在のgulpfile.js
// プラグインの読み込み
var gulp = require("gulp");
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var nested = require('postcss-nested');
var csswring = require('csswring');
var calc = require('postcss-calc');
var customProperties = require("postcss-custom-properties");
var browserSync = require("browser-sync");
// style.scssをコンパイルします。
// コンパイル後は、src/cssフォルダにソースマップとともにファイルを保存します。
gulp.task("default", function () {
gulp.src("src/css/style.scss");// 対象の決定
// .pipe(sourcemaps.init())// プラグインの実行
// .pipe(sass({outputStyle: "expanded"}))
// .pipe(autoprefixer({
// browsers: ["ios_saf >= 8", "Android >= 4"]
// }));
return gulp.src(
['./src-before/' , './src-before//*'],
{ base: 'src-before' }) //src-before下にある.cssファイルを指定
.pipe(postcssimport())
.pipe(postcss())
.pipe(cssnext()) //PostCSSにファイルを処理してもらう
.pipe(nested())
.pipe(csswring())
.pipe(calc())
.pipe(browserSync())
.pipe(autoprefixer({
browsers: ["ios_saf >= 8", "Android >= 4"]
}))
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置
});
//ローカルサーバーを立て、
//ファイル更新時に自動リロードするタスクです
gulp.task("default", function () {
//初期設定です
browserSync.init({
server: {
baseDir: "./" // このディレクトリをルートとしたサーバを立ち上げることができる。
}
});
});
gulp.watch ("../src-before/foundation/", function () { // ./*に変更があったら下記のブラウザシンクを更新してくれ
browserSync.reload();
});
//以下gulp-watch
gulp.task('watch', function(){
gulp.watch(['src-before/' , 'src-before//' , 'src-before///']);//監視したいファイルの相対パス
});
・実行結果
[BS] Access URLs:
Local: //localhost:3000
External: //192.168.2.111:3000
UI: //localhost:3001
UI External: //192.168.2.111:3001
[BS] Serving files from: ./
[BS] Watching files...
[BS] File changed: ..\src-before\foundation_base.css
[BS] File changed: ..\src-before\foundation_base.css
[BS] File changed: index.html
[BS] File changed: ..\src-before\foundation_base.css
・ディレクトリ構成
C:.
├─dest-after
│ ├─css
│ │ ├─foundation
│ │ ├─layout
│ │ └─object
│ │ ├─component
│ │ ├─project
│ │ └─utility
│ ├─html
│ ├─img
│ │ ├─common-img
│ │ └─index
│ ├─js
│ ├─plugin
│ └─web-font
├─node_modules
│ ├─.bin
│ ├─abbrev
│ ├─accepts
│ │ └─node_modules
│ │ ├─mime-db
│ │ └─mime-types
・トランスパイル前のpostcssはdest-afterフォルダと同じディレクトリないにあります。
・ちなみに下記コマンドはdest-afterフォルダをカレントとして実行しているので、
dest-after>browser-sync start --server --files "../src-before/foundation/*, index.html"
baseDir: "./" も
gulp.watch ("../src-before/foundation/*", function ()も
両方ともdest-afterをカレントとして相対パスを記載すればよいのですよね?
下記でとりあえずリロードはしました。
ただ元のソースでどの部分に問題があったかはまだはっきりしません。
gulp.watch(['dest-after/', 'src-before/' , 'src-before//' , 'src-before///*']).on('change', browserSync.reload);
});
の部分の訂正が効果的だったのでしょうか?
検証をしてみますが、ここが問題だったのだろうとおわかりでしたらそこを試してみたいので教えてください。
const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
require('postcss-import'),
require('postcss-cssnext'),
require('postcss-nested'),
require('csswring'),
require('postcss-calc'),
require("postcss-custom-properties"),
];
gulp.task("css", function(){
gulp.src('./src-before/css/**/*.css')
.pipe(postcss(cssPlugins))
.pipe(gulp.dest('./dest-after/'));
});
gulp.task('watch', function(){
gulp.watch('./src-before/css/**/*.css', ["css"]);
});
gulp.task("server", function(){
browserSync.init({
server: {
baseDir: "./dest-after/",
},
});
gulp.watch(['dest-after/*', 'src-before/**' , 'src-before/**/*' , 'src-before/**/**/*']).on('change', browserSync.reload);
});
gulp.task("default", ["watch", "server"]);