sourcemapsをpostcssで使うことはできないのでしょうか?
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/"));
});