1

gulpfile.js にて Browser Sync を使用しています。

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var browserSync = require('browser-sync').create();

// 略

gulp.task('default', function () { 
    var plugins = [
       postcssimport,
       cssnext,
       nested,
       calc,
       // browserSync
    ];

// 略
     .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう

上記の // browserSync// を外して有効にすると下記のエラーが出るのですが、なぜbrowserSyncのプラグインを読み込むと下記のエラーが出るのでしょうか?
browserSyncは読み込みは不要でしてはいけないのでしょうか?
ここで読み込まなくてもbrowserSyncは使えています。

throw new Error(i + ' is not a PostCSS plugin');     ^
Error: [object Object] is not a PostCSS plugin

1 件の回答 1

2

Browser Sync は PostCSS のプラグインではないからです。
基本的には何のプラグインでもありません。

browser-sync モジュールは、開発用のサーバを作成する為の API と、単独で動作するコマンドの両方を提供します。
API は Gulp と協調して動作させるのに便利な機能があり、他のモジュールを介さずgulpfile.js で使用されますが、Gulp 専用のプラグインというわけではなく、ましてや、PostCSS、Sass などのプラグインではないです。


質問のコードの plugins 変数は postcss への引数として用意されたもので、PostCSS のプラグインをまとめておく為に用意した物だったはずです。
編集しているうちに意図を忘れてしまったのでしょう。

私が以前の回答で下記のようにcssPlugins という変数名を用いたのは、こういった勘違いを防ぐ為です。

const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];
3
  • 見様見真似で行っているのでまさかpostcssのプラグインでないとは思いませんでした。sass
    – web
    Commented 2016年12月11日 12:32
  • プラグインだったということですかね。 また、その後ブラウザシンク自体はおかげさまでできたのですが、 postcssをセーブしても、下記が実行されずにリロードはするがcssの変更が適応されないようになりました。 疲れました。 var plugins = [ postcssimport, cssnext, //一旦空の配列を作成 nested, calc, csswring, customProperties // customMedia, // browserSyncという記載は必要ない ];
    – web
    Commented 2016年12月11日 12:42
  • また再質問させてもらいます。おそらくこれで出来上がると思いますので、恐縮ですがよろしくお願いいたします。
    – web
    Commented 2016年12月11日 12:43

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

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