30880


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

* * *

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

・実行結果

[code]

    >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
    
[/code]

・`gulpfile.js`

[code]

    // //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/"));   
    });
    
[/code]


CC BY-SA 3.0
2016-12-03T09:45:19.077
30865
2016-12-04T12:12:45.753
2016-12-04T12:12:45.753
3054
14320
question
javascript gulp
sourcemapsをpostcssで使うことはできないのでしょうか？


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

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

[code]

    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/') );
    });
    
[/code]

* * *

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

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

[code]

    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下に配置
    });
    
[/code]


CC BY-SA 3.0
2016-12-04T05:39:17.193
30880
2016-12-04T09:46:47.480
2016-12-04T09:46:47.480
3054
3054
30865
answer