https://teratail.com/questions/55217
のつづき
browser-syncがcssファイルの変更後更新されないです。
変更は検知しています。
htmlはリロードします。
なぜなのでしょうか?
dest-after>browser-sync start --server --files "../src-before/foundation/*, index.html"
[BS] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.2.111:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://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フォルダと同じディレクトリないにあります。
ソース
//gulpfile.js var gulp = require('gulp'); //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 customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える var browserSync = require('browser-sync').create(); gulp.task('default', function () { //”css”タスクを登録 var plugins = [ postcssimport, cssnext, //一旦空の配列を作成 nested, calc, csswring, customProperties, customMedia, browserSync ]; //ローカルサーバーを立て、 //ファイル更新時に自動リロードするタスクです gulp.task("default", function () { //初期設定です browserSync.init({ server: { baseDir: "./" // このディレクトリをルートとしたサーバを立ち上げることができる。 } }); }); gulp.watch ("../src-before/foundation/*", function () { // ./**に変更があったら下記のブラウザシンクを更新してくれ browserSync.reload(); }); console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為 return gulp.src( ['./src-before/*' , './src-before/*/*'], { base: 'src-before' }) //src-before下にある.cssファイルを指定 .pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう .pipe(gulp.dest('./dest-after/css')); //生成されたCSSを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をカレントとして相対パスを記載すればよいのですよね?
あなたの回答
tips
プレビュー