1

HTML ファイルを取得し、gulp-inline-css を使用して CSS ファイルから取得したスタイルをインライン化する Gulp タスクがあります。私のタスクの元のバージョンでは、各 HTML ファイルに同じ CSS ファイルを使用していました。ここで、タスクが処理している HTML ファイルのファイル名に基づいて、タスクに CSS ファイルを選択させたいと考えています。

gulp-tapファイル名を取得するために使用しています。このinliner()関数は CSS ファイルへのパスを受け取り、すべてのインライン処理を実行します。

次の Gulp タスクは、ファイルごとに inliner() を実行しますが、結果をストリームに挿入するのに失敗しているようです。いくつかの異なるアプローチを試しましたが、inliner() の結果を元のストリームに戻すことができないようです。

gulp.task('inline', inline);

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe(tap( (file, t) => {
      let fileName = path.basename(file.path);
      let cssPath = getStylesheetPathFromHtmlPath(fileName);
      return inliner(cssPath);
    }))
    .pipe(gulp.dest('dist'));
}

function inliner(cssPath) {
  var css = fs.readFileSync(cssPath).toString();
  var mqCss = siphon(css);
  var pipe = lazypipe()
    .pipe(inlineCss, {
      applyStyleTags: false,
      removeStyleTags: true,
      preserveMediaQueries: true,
      removeLinkTags: false
    })
    .pipe(replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe(replace, `<link rel="stylesheet" type="text/css" href="css/${getStylesheetNamespace(cssPath)}.css">`, '')
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });
  console.log(cssPath)
  return pipe();
}

gulp-tap の使い方が間違っていますか? これは非常に単純な使用例のようです。

4

2 に答える 2

1

「ファイルごとに」というフレーズを入力すると、gulp-foreachパッケージがあることを思い出し、機能しました! 私の新しいコードは次のようになります。

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe(forEach( (stream, file) => {
      let fileName = path.basename(file.path);
      let cssPath = getStylesheetPathFromHtmlPath(fileName);
      return stream .pipe(inliner(cssPath));
    }))
    .pipe(gulp.dest('dist'));
}

私の元のコードが機能しなかった理由を誰かが共有したい場合...なぜgulp-tapパイプラインに何かを挿入することができないように思われるのか、それは素晴らしいことです. そうでなければ、教訓：

パイプラインに新しいものを戻したい場合は、gulp-foreach代わりにユーザーを使用してください。gulp-tap

于 2017-06-13T00:46:00.993 に答える