質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • CSS3

    2624questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Node.js

    2358questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • gulp

    335questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

browser-syncがcssファイルの変更後更新されない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 966
退会済みユーザー

退会済みユーザー

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をカレントとして相対パスを記載すればよいのですよね?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

同じタグがついた質問を見る

  • CSS3

    2624questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Node.js

    2358questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • gulp

    335questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。