calebds / healthy-gulp-angular

A starting point for Gulp + Angular

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

francisrod01 opened this issue · comments

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?