31082


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

[code]

    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にファイルを処理してもらう
    
[/code]

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

[code]

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


CC BY-SA 3.0
2016-12-11T04:28:26.813
31080
2016-12-11T13:52:15.830
2016-12-11T13:52:15.830
3054
14320
question
gulp browser-sync
gulpfile.js で BrowserSync を使用すると "is not a PostCSS plugin" というエラーが出る


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

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

* * *

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

私が[以前の回答](https://ja.stackoverflow.com/a/30890/3054)で下記のように`cssPlugins`
という変数名を用いたのは、こういった勘違いを防ぐ為です。

[code]

    const cssPlugins = [
        require('postcss-import'),
        require('postcss-cssnext'),
        require('postcss-nested'),
        require('csswring'),
        require('postcss-calc'),
        require("postcss-custom-properties"),
    ];
    
[/code]


CC BY-SA 3.0
2016-12-11T05:19:15.757
31082
2016-12-11T13:30:53.110
2017-04-13T12:52:38.920
-1
3054
31080
answer