calebds / healthy-gulp-angular Goto Github PK

View Code? Open in Web Editor NEW

187.0 187.0 97.0 261 KB

A starting point for Gulp + Angular

JavaScript 19.03% HTML 1.90% CSS 79.08%

healthy-gulp-angular's People

Contributors

Stargazers

Watchers

Forkers

netcrafters paschdan aleksey-taranets russellf9 oshri markwilk mkgearhart addview lordkada cungen passionatecoding joegatt alistaircolling adi3230 sfzombies natdico dan-grayson david-mcqueen dedelp tapasbansal pat-ohara jasonlunsford ugbandula kaizvn iotbzh fescalona4 ddatta cryptixcoder ricardo-rossi nunodotferreira miladhamzelou aj-dev simodev25 viktortat kodlyzer iures noure tiyper1 maddan abstractiondev kyyblabla fulltom wannado stevepavlin krishan101090 c33-cooper mkishine davoodharun quachio farahty yudarik castlefields z00dev abrown3-nmdp zakhttp brunowdev james-lee-it wangmx928 iairbluer stolemyicecream sutmr saiyijinprince zeeshan1 dollys21 ohnooo darinallen nouman92 ahmedtab widdowmaker187 algaly madelfresno mbuendia denis-andrikevich josesaribeiro syed-akthar moumen-soliman codedeus m-sivanraj prosto312 chemalopez jamesshane wade1990 aaryakaur chrisengelsma bartomeutortella suckhoemoingay dieterwilliam mbote-joseph

healthy-gulp-angular's Issues

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

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?

Small bug with Node V4

With node.js v4.x "gulp-sass" version within Package.json should be moved to "^2.0.0" or system will fail on libsass. Error message is not very explicit:

Loading "sass.js" tasks...ERROR
Error: libsass bindings not found. Try reinstalling node-sass?
Warning: Task "sass" not found. Use --force to continue.

Unexpected token @ on babylon index.js

I have a problem to minify vendor scripts to production type.
I think that error is caused of angular-route and animate-css.

References to issues:
terinjokes/gulp-uglify#297
babel/babylon#546

I think that this code needs a filter to bower scripts / styles.

pipes.builtVendorScriptsProd = function () {
  return gulp.src(bowerFiles())
    .pipe(pipes.ordererVendorScripts())
    // .pipe(plugins.minify())
    .pipe(plugins.babel({compact: false, presets: ['es2015']}))
    .pipe(plugins.concat('vendor.min.js'))
    // .pipe(plugins.uglify({compress: true}).on('error', pipes.showErrors))
    .pipe(gulp.dest(paths.distScriptsProd))
}

I comment the line with uglify that also the same problem that.
See output in below:

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
SyntaxError: /home/paneladm/projects/website/bower_components/animate.css/animate.css: Unexpected token (1:0)
> 1 | @charset "UTF-8";
    | ^
  2 | 
  3 | /*!
  4 |  * animate.css -http://daneden.me/animate
    at Parser.pp$5.raise (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:4452:13)
    at Parser.pp.unexpected (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$1.parseDecorator (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1939:10)
    at Parser.pp$1.parseDecorators (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1924:26)
    at Parser.pp$1.parseStatement (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1818:10)
    at Parser.pp$1.parseBlockBody (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:2268:21)
    at Parser.pp$1.parseTopLevel (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1778:8)
    at Parser.parse (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1673:17)
    at parse (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:7180:37)
    at File.parse (/home/paneladm/projects/website/node_modules/babel-core/lib/transformation/file/index.js:517:15)

Hi.
Could you please make a setup without bower? I would like to use only npm.
Or could you please tell me what I need to change in gulpfile.js so that the packages are taken from node_modules instead of bower_components?
I'm pretty green when it comes to gulp.

Thank you

sometimes partials not loaded into $templateCache

es.merge not guaranties the order of scripts processed here if scriptedPartials comes earlier then validatedAppScripts in app.min.js then partials wont loaded into $templateCache.

i want to use bootstrap what i need to change inthis system

can you help me to setup bootstrap inspite of foundation

Foundation 6 ?

Foundation just announced the version 6. Would be nice to get the latest version integrated http://foundation.zurb.com/sites-6-docs/installation.html

Note that version 6 already propose a template for Angular, but it is far less advanced than your and especially does not propose the dual Production/Debug mode.

Big apps structure improvement

Your gulpfile.js looks robust. That's why I made a test with angular-material here !!. This may suit to big projects wich may need alot of feature implementation in future by following this directory structure.
It would be nice if I could get all modules with their dependencies and their configs in one single file app.module.js like this.

file app.modules.js :

(function() {
  var app = angular.module('app', ['lots of dependencies']);
  app.config();
  var appBlue = angular.module('appBlue', ['more dependencies']);
}());

and be able to call any module in the file as many times as I want to create controllers, directives and services in separate files.

file sidebar.Directive. js:

(function() {
  app.directive();
}());

file sidebar.Controller. js:

(function() {
  app.controller();
}());

The problem is that I can't get app.module.js to be injected before other scripts. How can I pass through this problem.

Function pipes.builtVendorScriptsProd includes also css definitions from vendor packages

The bowerFiles() here call does not include any filter to discard anything it's not a script (the following uglify throws error if the stream is not a pure js file)

calebds / healthy-gulp-angular Goto Github PK

healthy-gulp-angular's People

Contributors

Stargazers

Watchers

Forkers

healthy-gulp-angular's Issues

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

Update

Small bug with Node V4

Unexpected token @ on babylon index.js

Setup without bower

sometimes partials not loaded into $templateCache

i want to use bootstrap what i need to change inthis system

Foundation 6 ?

Big apps structure improvement

Function pipes.builtVendorScriptsProd includes also css definitions from vendor packages

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent