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

投稿者: Anonymous

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 ~Desktopimagesgulp-folderwebsiteaaagulpfile.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/"));   
});

解決

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下に配置
});
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *