Skip to main content
タグを編集
リンク
mjy
  • 1.2万
  • 3
  • 22
  • 53
まとめました
ソース リンク
mjy
  • 1.2万
  • 3
  • 22
  • 53

ブラウザーシンクについて。index.htmlだけリロード Gulp で起動てくれてcssはしてくれません。た BrowserSync に出力先ディレクトリの更新時にもれなくリロードさせたい

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

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

現在のgulpfile.js

// プラグインの読み込み
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をカレントとして相対パスを記載すればよいのですよね?

下記でとりあえずリロードはしました。
ただ元のソースでどの部分に問題があったかはまだはっきりしません。
gulp.watch(['dest-after/', 'src-before/' , 'src-before//' , 'src-before///*']).on('change', browserSync.reload);
});
の部分の訂正が効果的だったのでしょうか?
検証をしてみますが、ここが問題だったのだろうとおわかりでしたらそこを試してみたいので教えてください。

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];

gulp.task("css", function(){
    gulp.src('./src-before/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest-after/'));
});

gulp.task('watch', function(){
    gulp.watch('./src-before/css/**/*.css', ["css"]);
});

gulp.task("server", function(){
    browserSync.init({
        server: {
            baseDir: "./dest-after/",
        },
    });
    gulp.watch(['dest-after/*', 'src-before/**' , 'src-before/**/*' , 'src-before/**/**/*']).on('change', browserSync.reload);
});

gulp.task("default", ["watch", "server"]);

ブラウザーシンクについて。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をカレントとして相対パスを記載すればよいのですよね?

下記でとりあえずリロードはしました。
ただ元のソースでどの部分に問題があったかはまだはっきりしません。
gulp.watch(['dest-after/', 'src-before/' , 'src-before//' , 'src-before///*']).on('change', browserSync.reload);
});
の部分の訂正が効果的だったのでしょうか?
検証をしてみますが、ここが問題だったのだろうとおわかりでしたらそこを試してみたいので教えてください。

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];

gulp.task("css", function(){
    gulp.src('./src-before/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest-after/'));
});

gulp.task('watch', function(){
    gulp.watch('./src-before/css/**/*.css', ["css"]);
});

gulp.task("server", function(){
    browserSync.init({
        server: {
            baseDir: "./dest-after/",
        },
    });
    gulp.watch(['dest-after/*', 'src-before/**' , 'src-before/**/*' , 'src-before/**/**/*']).on('change', browserSync.reload);
});

gulp.task("default", ["watch", "server"]);

Gulp で起動た BrowserSync に出力先ディレクトリの更新時にもれなくリロードさせたい

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

現在のgulpfile.js

// プラグインの読み込み
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///']);//監視したいファイルの相対パス
});
本文に 1316 文字追加
ソース リンク
web
  • 129
  • 1
  • 3
  • 19

下記でとりあえずリロードはしました。
ただ元のソースでどの部分に問題があったかはまだはっきりしません。
gulp.watch(['dest-after/', 'src-before/' , 'src-before//' , 'src-before///*']).on('change', browserSync.reload);
});
の部分の訂正が効果的だったのでしょうか?
検証をしてみますが、ここが問題だったのだろうとおわかりでしたらそこを試してみたいので教えてください。

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];

gulp.task("css", function(){
    gulp.src('./src-before/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest-after/'));
});

gulp.task('watch', function(){
    gulp.watch('./src-before/css/**/*.css', ["css"]);
});

gulp.task("server", function(){
    browserSync.init({
        server: {
            baseDir: "./dest-after/",
        },
    });
    gulp.watch(['dest-after/*', 'src-before/**' , 'src-before/**/*' , 'src-before/**/**/*']).on('change', browserSync.reload);
});

gulp.task("default", ["watch", "server"]);

下記でとりあえずリロードはしました。
ただ元のソースでどの部分に問題があったかはまだはっきりしません。
gulp.watch(['dest-after/', 'src-before/' , 'src-before//' , 'src-before///*']).on('change', browserSync.reload);
});
の部分の訂正が効果的だったのでしょうか?
検証をしてみますが、ここが問題だったのだろうとおわかりでしたらそこを試してみたいので教えてください。

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];

gulp.task("css", function(){
    gulp.src('./src-before/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest-after/'));
});

gulp.task('watch', function(){
    gulp.watch('./src-before/css/**/*.css', ["css"]);
});

gulp.task("server", function(){
    browserSync.init({
        server: {
            baseDir: "./dest-after/",
        },
    });
    gulp.watch(['dest-after/*', 'src-before/**' , 'src-before/**/*' , 'src-before/**/**/*']).on('change', browserSync.reload);
});

gulp.task("default", ["watch", "server"]);
インデントを入れてはいませんがとりあえずフォーマット
ソース リンク
読み込んでいます
ソース リンク
web
  • 129
  • 1
  • 3
  • 19
読み込んでいます