Skip to content

appStyles on pipes.buildIndexDev doesn't let inject anything into index.html #14

@francisrod01

Description

@francisrod01

I have a doubt why nothing was injected in dist.dev/index.html.

Issue referenced by klei/gulp-inject#139

  • Obs.: I use the original code, but I just add debug() plugin.
pipes.builtIndexDev = function() {
    ...
    return pipes.validatedIndex()
        .pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject
        .pipe(plugins.debug())
        .pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'}))
        .pipe(plugins.inject(orderedAppScripts, {relative: true}))
        .pipe(plugins.inject(appStyles, {relative: true}))
        .pipe(gulp.dest(paths.distDev));
};
$ gulp clean-build-app-dev
[16:25:03] Using gulpfile ~/projects/healthy-gulp-angular/gulpfile.js
[16:25:03] Starting 'clean-dev'...
[16:25:03] Finished 'clean-dev' after 41 ms
[16:25:03] Starting 'clean-build-app-dev'...
[16:25:03] gulp-debug: dist.dev/index.html
[16:25:03] gulp-debug: 1 item
[16:25:04] gulp-inject 8 files into index.html.
[16:25:04] gulp-inject 2 files into index.html.

And nothing was injected!

Update

I found a problem with appStyles inject:

pipes.builtIndexDev = function() {
    var orderedVendorScripts = pipes.builtVendorScriptsDev()
        .pipe(pipes.orderedVendorScripts());

    var orderedAppScripts = pipes.builtAppScriptsDev()
        .pipe(pipes.orderedAppScripts());

    var appStyles = pipes.builtStylesDev();

    console.log('app vendors ==== ', orderedVendorScripts);
    console.log('app scripts ==== ', orderedAppScripts);
    console.log('app styles ==== ', appStyles);

    return pipes.validatedIndex()
        ...
        .pipe(plugins.inject(appStyles, {relative: true})) <--- this line causes empty inject
        .pipe(gulp.dest(paths.distDev));
};

References:

https://www.npmjs.com/package/gulp-inject#injecting-all-files-for-development

I debug appStyles and retun a DestroyableTransform type. See below:

app vendors ====  Stream {
  domain: null,
  _events: 
   { end: [Function],
     drain: [Function: ondrain],
     error: [Function: onerror],
     close: [Function: cleanup] },
  _eventsCount: 4,
  _maxListeners: undefined,
  writable: true,
  readable: true,
  paused: false,
  autoDestroy: true,
  write: [Function],
  push: [Function],
  queue: [Function],
  end: [Function],
  destroy: [Function],
  pause: [Function],
  resume: [Function] }

app scripts ====  Stream {
  domain: null,
  _events: 
   { end: [Function],
     drain: [Function: ondrain],
     error: [Function: onerror],
     close: [Function: cleanup] },
  _eventsCount: 4,
  _maxListeners: undefined,
  writable: true,
  readable: true,
  paused: false,
  autoDestroy: true,
  write: [Function],
  push: [Function],
  queue: [Function],
  end: [Function],
  destroy: [Function],
  pause: [Function],
  resume: [Function] }

app styles ====  DestroyableTransform {
  _readableState: 
   ReadableState {
     highWaterMark: 16,
     buffer: [],
     length: 0,
     pipes: null,
     pipesCount: 0,
     flowing: false,
     ended: false,
     endEmitted: false,
     reading: true,
     calledRead: true,
     sync: false,
     needReadable: true,
     emittedReadable: false,
     readableListening: false,
     objectMode: true,
     defaultEncoding: 'utf8',
     ranOut: false,
     awaitDrain: 0,
     readingMore: false,
     decoder: null,
     encoding: null },
  readable: true,
  domain: null,
  _events: 
   { end: { [Function: bound onceWrapper] listener: [Function: onend] },
     finish: { [Function: bound onceWrapper] listener: [Function] },
     readable: [Function],
     drain: [Function: ondrain],
     error: [Function: onerror],
     close: [Function: cleanup] },
  _eventsCount: 6,
  _maxListeners: undefined,
  _writableState: 
   WritableState {
     highWaterMark: 16,
     objectMode: true,
     needDrain: false,
     ending: false,
     ended: false,
     finished: false,
     decodeStrings: true,
     defaultEncoding: 'utf8',
     length: 0,
     writing: false,
     sync: true,
     bufferProcessing: false,
     onwrite: [Function],
     writecb: null,
     writelen: 0,
     buffer: [],
     errorEmitted: false },
  writable: true,
  allowHalfOpen: true,
  _transformState: 
   TransformState {
     afterTransform: [Function],
     needTransform: true,
     transforming: false,
     writecb: null,
     writechunk: null },
  _destroyed: false,
  _transform: [Function: saveFile],
  pipe: [Function],
  addListener: [Function: addListener],
  on: [Function: addListener],
  pause: [Function],
  resume: [Function] }
[10:57:44] gulp-debug: dist.dev/index.html
[10:57:44] gulp-debug: 1 item
[10:57:44] gulp-inject 8 files into index.html.
[10:57:44] gulp-inject 2 files into index.html.

Would you help me please?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions