質問編集履歴

1 gulpのソースを追加しました

退会済みユーザー

退会済みユーザー

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

    4611 questions

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

  • Node.js

    3925 questions

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

  • gulp

    477 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る