30890


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

現在の`gulpfile.js`

[code]

    // プラグインの読み込み
    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///']);//監視したいファイルの相対パス
    });
    
[/code]


CC BY-SA 3.0
2016-12-04T11:56:13.997
30887
2016-12-11T14:23:47.310
2016-12-11T14:23:47.310
3054
14320
question
javascript gulp browser-sync
Gulp で起動した BrowserSync に出力先ディレクトリの更新時にもれなくリロードさせたい

[code]

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

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

[code]

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

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

* * *

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

[code]

    // 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"]);
    
[/code]


CC BY-SA 3.0
2016-12-04T14:41:38.967
30890
2016-12-04T14:41:38.967
3054
30887
answer