2016-06-28 2 views
4

Я пытаюсь использовать gulp-html-replace, чтобы сделать замену, используя содержимое потока. В документации ясно, что это возможно (https://www.npmjs.com/package/gulp-html-replace), но для меня это не работает.gulp-html-replace не работает должным образом с потоком

Вот один из обижая глотком задачи:

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'); 
    }); 

Проблема в том, что в разметке это:

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

заменяется следующим образом:

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

Очевидно я бы хотел, чтобы он был заменен встроенным CSS в глава моих документов.

Одно очевидное различие между тем, что я сделал, по сравнению с, например, в документации:

Docs: src: gulp.src(...).pipe(sass()),

Mine: src: gulp.src(...),

То есть, я не перенаправив поток где-либо еще, потому что не требуется дальнейшая обработка: я уже запускал sass по всем моим CSS и минимизировал, если это нужно, в зависимости от целевой среды, к моменту запуска этой задачи.

Мне кажется, что я должен делать что-то вроде gulp.src(...).pipe(somethingElse()), чтобы получить результат, который я хочу, но я не уверен, что должен быть somethingElse(), потому что я просто хочу сырое содержимое потока. Это обязано быть чем-то невероятно простым, но я все еще достаточно n00b с этим материалом, чтобы его не хватало.

У кого-нибудь есть предложения, пожалуйста?

EDIT

Стоит отметить, что я попытался с помощью Глоток-UTIL «с (https://github.com/gulpjs/gulp-util) Nööp следующим образом:

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

... 

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

с тем же результатом - я просто закончите с [object Object], а не CSS в моем обработанном виде.

Спасибо,

Барт

ответ

1

ОК, так что я, вероятно, будет ад для этого, но есть довольно простое синхронное решение:

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

Это работает отлично, но я более чем счастлив принять более идиоматический ответ , в отличие от вышесказанного, который кажется немного взломанным.

Смежные вопросы