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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

Node.js

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

gulp

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

Q&A

0回答

2655閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

Node.js

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

gulp

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

0グッド

0クリップ

投稿2016/12/01 03:26

編集2023/04/24 15:56

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問