0

sourcemapsをpostcssで使うことはできないのでしょうか?
日本語の情報もほとんど見つかりません。


使用を試みると、下記のエラーが出ます。

・実行結果

>gulp sourcemaps
(node:5620) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[18:26:30] Using gulpfile ~\Desktop\images\gulp-folder\website\aaa\gulpfile.js
[18:26:30] Starting 'sourcemaps'...
[18:26:30] 'sourcemaps' errored after 71 ms
[18:26:30] Error in plugin 'gulp-postcss'
Message:
    Please provide array of postcss processors!
[18:27:16] ReferenceError: css is not defined

gulpfile.js

// //gulpfile.js
var gulp = require('gulp');              //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 comment = require('postcss-comment');
var customProperties = require("postcss-custom-properties");
var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える
var sourcemaps = require("gulp-sourcemaps");
// var browserSync = require('browser-sync').create();


gulp.task('css', function () {           //”css”タスクを登録
  var plugins = [
  postcssimport,
  cssnext,                      //一旦空の配列を作成
  nested,
  calc,
  csswring,
  // comment,
  customProperties,
  // customMedia,
  // browserSync
   ];

// returnは上から順番にプラグインを実行していくという意味
  return gulp.src(
    ['./src-before/*.css' , './src-before/*/*.css'],
    { base: 'src-before' })         //src-before下にある.cssファイルを指定
    .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう
    .pipe(gulp.dest('./dest-after/css'));          //生成されたCSSをdest-after下に配置
});

gulp.task("sourcemaps", function () {
  gulp.src(['./src-before/*.css' , './src-before/*/*.css'])
    .pipe(sourcemaps.init()) 
    .pipe(postcss())   //postcssのコンパイル
    .pipe(sourcemaps.write("./"))  
    .pipe(gulp.dest("./src-before/"));   
});
8
  • nodejsがわからない初心者なので、恐縮ですがその方法がわからず質問させてもらいました。 おそらく下記がcssに渡している配列のことだと思いますが、 gulp.task('css', function () { //”css”タスクを登録 var plugins = [ 下記でpostcssに渡しているつもりでしたが渡せていないのでしょうか? .pipe(postcss(plugins)) 下記のようにするということですか? gulp.task('postcss', function () { var plugins = [ postcssimport, cssnext, //一旦空の配列を作成 nested, calc, csswring, // comment, customProperties, // customMedia, // browserSync ];
    – web
    Commented 2016年12月3日 11:41
  • 1
    初心者なので、具体的なソースコードを示してもらえませんか
    – web
    Commented 2016年12月3日 13:06
  • そうでないと同じ事になる可能性が高いので。
    – web
    Commented 2016年12月3日 13:06
  • そもそも何故複数タスクに分けているのでしょう…(変換前のファイル上書きしますよねこれ…
    – hinaloe
    Commented 2016年12月3日 17:23
  • ありがとうございます。 すると下記でよいのですね。 gulp.task("sourcemaps", function () { gulp.src(['./src-before/*.css' , './src-before/*/*.css']) .pipe(sourcemaps.init()) .pipe(postcss(plugins)) //postcssのコンパイル .pipe(sourcemaps.write("./")) .pipe(gulp.dest("./src-before/")); });
    – web
    Commented 2016年12月4日 1:05

1 件の回答 1

1

sourcemapsをpostcssで使うことはできないのでしょうか?

使用出来ます。
公式の README でも gulpの使用例では、gulp-sourcemapsが使われています。
https://github.com/postcss/postcss#gulp

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('src/**/*.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('autoprefixer'), require('precss') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

以下蛇足ですが、質問者が直面しているエラーの解決に役立てば幸いです。

質問者のcssタスクからsourcemaps タスクを作成すると下記のようになります。
注: 変なコメントなどもそのままです。内容が理解出来ない場合は実行しないで下さい。大事なファイルが消えてしまった、などの事態に責任は一切負えません

gulp.task('sourcemaps', function () {
  var plugins = [
  postcssimport,
  cssnext,                      //一旦空の配列を作成
  nested,
  calc,
  csswring,
  // comment,
  customProperties,
  // customMedia,
  // browserSync
   ];

// returnは上から順番にプラグインを実行していくという意味
  return gulp.src(
    ['./src-before/*.css' , './src-before/*/*.css'],
    { base: 'src-before' })         //src-before下にある.cssファイルを指定
    .pipe(sourcemaps.init()) 
    .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう
    .pipe(sourcemaps.write("./"))  
    .pipe(gulp.dest('./dest-after/css'));          //生成されたCSSをdest-after下に配置
});
15
  • ありがとうございます。 ただ下記のようにすでにその記載はあるように思えるのですが、これが理由なのでしょうか? gulp.task("sourcemaps", function () { return gulp.src(['./src-before/*.css' , './src-before/*/*.css']) .pipe(sourcemaps.init()) .pipe(postcss(plugins)) //postcssのコンパイル .pipe(sourcemaps.write("./")) .pipe(gulp.dest("./dest-after")); });
    – web
    Commented 2016年12月4日 6:31
  • .pipe(sourcemaps.write("./")) // マップファイルを出力するパスを指定します と聞いたのですがこの認識でよいでしょうか? するとそのあとのdestは出力先ではないのでしょうか?
    – web
    Commented 2016年12月4日 6:36
  • ・ディレクトリ構成は下記のようになっています。 gulpfile.js、dest-after、src-beforeは同じディレクトリ内にあります。 C:. ├─dest-after │ ├─css │ │ ├─foundation │ │ ├─layout │ │ └─object │ │ ├─component │ │ ├─project │ │ └─utility │ ├─html │ ├─img │ │ ├─common-img │ │ └─index │ ├─js │ ├─plugin │ └─web-font ├─node_modules │ ├─.bin │ ├─abbrev │ │ │ |─src-before │ ├─css │ │ ├─foundation │ │ ├─layout │ │ └─object │ │ ├─component │ │ ├─project │ │ └─utility
    – web
    Commented 2016年12月4日 6:40
  • gulp.task("sourcemaps", function () { return gulp.src(['./src-before/*.css' , './src-before/*/*.css']) .pipe(sourcemaps.init()) .pipe(postcss()) //postcssのコンパイル .pipe(sourcemaps.write("./")) // マップファイルを出力するパスを指定します .pipe(gulp.dest("./src-before/")); }); 上記のようにしましたが
    – web
    Commented 2016年12月4日 8:43
  • かきのようにえらーになりました >gulp sourcemaps (node:9300) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. [17:39:52] Using gulpfile ~\Desktop\images\gulp-folder\website\aaa\gulpfile.js [17:39:52] Starting 'sourcemaps'... [17:39:52] 'sourcemaps' errored after 55 ms [17:39:52] Error in plugin 'gulp-postcss' Message: Please provide array of postcss processors!
    – web
    Commented 2016年12月4日 8:48

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

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