Skip to main content
2 / 5
インデントを入れてはいませんがとりあえずフォーマット

ブラウザーシンクについて。index.htmlだけリロードしてくれてcssはしてくれません。

browser-sync でカレントディレクトリ以下にないファイルも監視したい
のつづき

その後試行錯誤の結果何とかcssの変更を感知するところまでは来ているのですが、index.htmlだけリロードしてくれてcssはしてくれません。

// プラグインの読み込み
var gulp = require("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 browserSync = require("browser-sync");

// style.scssをコンパイルします。
// コンパイル後は、src/cssフォルダにソースマップとともにファイルを保存します。
gulp.task("default", function () {
gulp.src("src/css/style.scss");// 対象の決定
// .pipe(sourcemaps.init())// プラグインの実行
// .pipe(sass({outputStyle: "expanded"}))
// .pipe(autoprefixer({
// browsers: ["ios_saf >= 8", "Android >= 4"]
// }));
return gulp.src(
['./src-before/' , './src-before//*'],
{ base: 'src-before' }) //src-before下にある.cssファイルを指定
.pipe(postcssimport())
.pipe(postcss())
.pipe(cssnext()) //PostCSSにファイルを処理してもらう
.pipe(nested())
.pipe(csswring())
.pipe(calc())
.pipe(browserSync())
.pipe(autoprefixer({
browsers: ["ios_saf >= 8", "Android >= 4"]
}))
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置
});

//ローカルサーバーを立て、
//ファイル更新時に自動リロードするタスクです
gulp.task("default", function () {
//初期設定です
browserSync.init({
server: {
baseDir: "./" // このディレクトリをルートとしたサーバを立ち上げることができる。
}
});
});

gulp.watch ("../src-before/foundation/", function () { // ./*に変更があったら下記のブラウザシンクを更新してくれ
browserSync.reload();
});

//以下gulp-watch
gulp.task('watch', function(){
gulp.watch(['src-before/' , 'src-before//' , 'src-before///']);//監視したいファイルの相対パス
});

・実行結果

[BS] Access URLs:

Local: //localhost:3000
External: //192.168.2.111:3000

  UI: //localhost:3001

UI External: //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フォルダと同じディレクトリないにあります。

・ちなみに下記コマンドはdest-afterフォルダをカレントとして実行しているので、
dest-after>browser-sync start --server --files "../src-before/foundation/*, index.html"

baseDir: "./" も
gulp.watch ("../src-before/foundation/*", function ()も
両方ともdest-afterをカレントとして相対パスを記載すればよいのですよね?

web
  • 129
  • 1
  • 3
  • 19