0

そのため、Autoprefixer は更新された postcss バージョンを使用するように私を悩ませてきたので、Gulp ファイルを更新しようとしています。

問題は、すべての例が最初のステップとして Sass を統合していないことです。私はgulp-ruby-sassを使っています。

sass ディレクトリで sass タスクを実行すると (そこで処理する必要がある 2 つの scss ファイルがあります)、これは機能し、dest ディレクトリに 2 つの css ファイルを出力します。

  gulp.task('sass', function() {
  return sass('./app/assets/sass')
  .on('error', function(err) {
    console.error('Error!', err.message);
  })
  .pipe(gulp.dest('./app/assets/css'))
  .pipe(reload({
    stream: true
  }));
});

しかし、私の質問は、次の部分をどのように統合して、CSS を autoprefixer に渡し、ソースマップを生成するかということです。これを順番に次に実行すると、これは object is not a function エラーで爆発します:

  gulp.task('autoprefixer', function() {
  return gulp.src('./app/assets/css/')
  .pipe(sourcemaps.init())
  .pipe(postcss([autoprefixer({
    browsers: ['last 2 versions']
  })]))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./app/assets/css'));
});

私はそれらをシーケンスとして実行しようとしていましたが、むしろそれらを統合したいと思います:

gulp.task('styles', function() {
  runSequence('sass', 'autoprefixer');
});

ruby-sass、autoprefixer、および sourcemap をすべて連携させるためのパイプをまとめることはできません。

アップデート：

OK、タスクを分離したままにしておくことにした場合でも (@patrick-kostjens によって以下に提案されているように)、Autoprefixer タスクを実行すると、次のエラーが発生します。

    [08:56:38] Starting 'autoprefixer'...

events.js:72
    throw er; // Unhandled 'error' event
          ^
TypeError: Cannot call method 'toString' of null
at new Input (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/input.js:29:24)
at Object.parse [as default] (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/parse.js:17:17)
at new LazyResult (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:54:42)
at Processor.process (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:30:16)
at Transform.stream._transform (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/index.js:44:8)
at Transform._read (_stream_transform.js:179:10)
at Transform._write (_stream_transform.js:167:12)
at doWrite (_stream_writable.js:223:10)
at writeOrBuffer (_stream_writable.js:213:5)
at Transform.Writable.write (_stream_writable.js:180:11)
at write (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at DestroyableTransform.EventEmitter.emit (events.js:92:17)
at emitReadable_ (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)

そして、提案どおり autoprefixer = autoprefixer-core を試しました。

4

3 に答える 3

1

個人的には、次のようにタスクを宣言することsassで、タスクを依存関係にします。autoprefixerautoprefixer

gulp.task('autoprefixer', ['sass'], function() {
    // Your current autoprefixer code here.
});

その後、単純にautoprefixerタスクを実行できます。

本当にそれらを 1 つのタスクに統合したい場合 (タスクが 2 つの別々のことを行う場合でも)、次のようなことを試すことができます。

gulp.task('autoprefixer', function() {
    return es.concat( 
        gulp.src('./app/assets/css/')
            .pipe(sourcemaps.init())
            .pipe(postcss([autoprefixer({
                browsers: ['last 2 versions']
            })]))
            .pipe(sourcemaps.write('.'))
        ,
        sass('./app/assets/sass')
            .on('error', function(err) {
                console.error('Error!', err.message);
             }))
        .pipe(gulp.dest('./app/assets/css'));
});

esとして定義することを忘れないでくださいrequire('event-stream')。

于 2015-08-12T18:43:40.010 に答える
0

どのようにautoprefixer要件を含めていますか? これは私にはうまくいきません：

var autoprefixer = require('gulp-autoprefixer');

これは機能します：

var autoprefixer = require('autoprefixer-core');
于 2015-08-18T07:04:06.743 に答える