退会済みユーザー
2016/12/01 19:07 投稿
| browser-syncがcssファイルの変更後更新されない |
| 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はafterのカレントディレクトリにあります。 |
| ・トランスパイル前の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をカレントとして相対パスを記載すればよいのですよね？ |
