1

何とか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///']);//監視したいファイルの相対パス
});
3
  • Stack Overflowでは、解決済みの質問に新たな問いを追加しないで下さい。後から読んだ第三者にも役に立つ独立した Q&A にする事を目標にして下さい。後ほど大幅に編集するかも知れませんが悪しからずご了承下さい。
    – mjy
    Commented 2016年12月9日 8:11
  • 了解しました。再質問にしますので、こちらで引き続きよろしくお願いいたします。
    – web
    Commented 2016年12月10日 3:32
  • ソースを記載しましたが、どうでしょうか?まだ足りない情報がありますか?
    – web
    Commented 2016年12月12日 10:01

1 件の回答 1

1
gulp.watch("./dest/**/*").on('change', browserSync.reload);

とりあえず、上記のように出力先ディレクトリ(browser-syncで提供するディレクトリ)全体をwatchするのはいかがでしょうか。
もちろん、ソースの方は下のように、また別に監視するという事で。

gulp.watch('./src/css/**/*.css', ["css"]);

細かい点は気になるかも知れませんが、まずは動かす事が先決です。


上記を各タスクに組込むと、例えば下記のようになります。
gulpとだけ実行すればよいです。
browser-syncコマンドを別途実行する必要はありません。

// gulpfile.js
// src -> dest

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/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest/'));
});

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

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

gulp.task("default", ["watch", "server"]);
3
  • ありがとうございます。いただいたソースではできました。
    – web
    Commented 2016年12月9日 7:34
  • ただ、検証をしてみますが、元のソースのここが問題だったのだろうとおわかりでしたらそこを試してみたいので教えてください。うまくいったソースを質問欄に追加しておきました。
    – web
    Commented 2016年12月9日 7:35
  • ja.stackoverflow.com/questions/31067/… に続きを書きましたので、よろしければ元のソースのどこに問題があったか教えてもらえませんか?そこを変更してみます。
    – web
    Commented 2016年12月11日 1:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。