2016-06-28 3 views
4

gulp-html-を置き換えて、ストリームの内容を使用して置き換えようとしています。このドキュメントではこれが可能であることが明らかになりましたが(https://www.npmjs.com/package/gulp-html-replace)、私にとっては機能しません。gulp-html-replaceがストリームで期待どおりに機能しない

<!-- build:baseInlineStyles--> 
<!-- endbuild--> 

これに置き換えられます:

function processMarkup(sourceViewFilename, gameScriptFilename) { 
    return gulp.src('build/temp/views/' + sourceViewFilename) 
     .pipe(htmlReplace({ 
      css: { 
       src: '/styles/arcadelyCommonGameStyles.min.css', 
       tpl: '<link rel="preload" href="%s" as="style" onload="this.rel=\'stylesheet\'" />' 
      }, 
      commonjs: { 
       src: '/scripts/arcadely-common.min.js', 
       tpl: '<script type="text/javascript" src="%s"></script>' 
      }, 
      js: { 
       src: '/scripts/' + gameScriptFilename, 
       tpl: '<script type="text/javascript" src="%s"></script>' 
      }, 
      // THE FOLLOWING DOESN'T WORK... 
      baseInlineStyles: { 
       src: gulp.src('./build/temp/styles/baseInlineStyles.css'), 
       tpl: '<style type="text/css">%s</style>' 
      } 
     })) 
     .pipe(gulpif(
       options.buildTarget === 'production' || options.buildTarget === 'test', 
       htmlMin({collapseWhitespace: true}))) 
     .pipe(gulp.dest('build/' + options.buildTarget + '/views/')); 
} 

... 

gulp.task(
    'process-starcastle-markup', 
    ['clean', 'compile-views', 'compile-pages', 'process-inline-styles'], 
    function() { 
     return processMarkup('starcastle.html', 'starcastle.min.js'); 
    }); 

問題は、マークアップで、これがあることである:明らかに

<style type="text/css">[object Object]</style> 

はここタスク問題一気の一つですそれに置き換えたいものはインラインCSです私の書類の頭にあるS。

私はドキュメントで例に対して、何をやったかの間に1つの明らかな違いがある:

ドキュメント:src: gulp.src(...).pipe(sass()),

鉱山:src: gulp.src(...),

すなわち、私はストリームをパイプではありませんよそれ以上の処理は必要ありません。私はすでにのSassをすべてのCSSで実行しました。このタスクが実行されるまでにターゲット環境に応じて必要な場合は、

私が望む結果を得るにはgulp.src(...).pipe(somethingElse())のようなことをしなければならないようですが、ストリームの生の内容がほしいから、somethingElse()が何であるべきかわかりません。これは信じられないほどシンプルなものに縛られていますが、私はまだこのメニンクを見逃すには十分なn00bです。

誰にも提案はありますか? - 私は

var gutil = require('gulp-util'); 

... 

baseInlineStyles: { 
    src: gulp.src('./build/temp/styles/baseInlineStyles.css').pipe(gutil.noop()), 
    tpl: '<style type="text/css">%s</style>' 
} 

を同じ結果で次のように私は、一口-utilの年代(https://github.com/gulpjs/gulp-utilNOOPを使用して試したことを指摘

フォートワース

EDIT私の処理されたビューでCSSではなく、[object Object]になります。

おかげで、

バート

答えて

1

OK、私はおそらくこのために地獄に行くんだけど、かなり単純な同期ソリューションがあります:

baseInlineStyles: { 
    src: fs.readFileSync(
     'build/temp/styles/baseInlineStyles.css', 
     {encoding: 'utf8'}), 
    tpl: '<style type="text/css">%s</style>' 
} 

これは完璧に動作しますが、私はよより多くの慣用句を受け入れることを喜んで以上ギャル答え、これは、ハックのビットのように感じる上記とは対照的に。

関連する問題