Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some modules not supported #8

Open
automaticgiant opened this issue Aug 7, 2014 · 5 comments
Open

Some modules not supported #8

automaticgiant opened this issue Aug 7, 2014 · 5 comments

Comments

@automaticgiant
Copy link

gulp-angular-filesort is presently not correctly placing ng-table.js or ui-bootstrap-tpls.js after angular.js.
I'm not sure if this is a gulp-angular-filesort problem or a ng-dependencies problem.
@joakimbeng
Copy link
Member

How do you add those 3rd party libs to your gulp stream? With main-bower-files?

If so I'd recommend not to pipe those libs through gulp-angular-filesort, only pipe your app files through this module because main-bower-files already sorts the vendor files according to how they depend on each other.

Here is an example of how I do it myself:

Example:

The gulpfile:

var gulp = require('gulp');
var inject = require('gulp-inject');
var angularFilesort = require('gulp-angular-filesort');
var bowerFiles = require('main-bower-files');

gulp.task('index', function () {
  return gulp.src('./src/index.html')
    .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower'})
    .pipe(inject(gulp.src('./src/**/*.js').pipe(angularFilesort())))
    .pipe(gulp.dest('./build');
});

In index.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <!-- bower:js -->
    <!-- endinject -->
    <!-- inject:js -->
    <!-- endinject -->
  </body>
</html>

Hope that helps!

@karlhorky
Copy link

I'm having a similar issue with the angular-localForage library. This library requires that localForage be included before the angular library for it to work. I am manually ordering my JavaScript paths array for the gulp.src method before I send it to this plugin. It appears that the .reverse() here required for the toposort array is reversing these paths, which causes the library to break.

So, for example, this doesn't work:
gulpfile.js

var paths = [
  './libs/localforage/dist/localforage.js',
  './libs/angular-localForage/dist/angular-localForage.js',
  './!(libs)/**/*.js'
];

but this does:

var paths = [
  './libs/angular-localForage/dist/angular-localForage.js',
  './libs/localforage/dist/localforage.js',
  './!(libs)/**/*.js'
];

@karlhorky
Copy link

If the .reverse() cannot be removed, maybe another option would be to add configuration options for manually prepending and appending certain files. Could look something like:

var paths = [
  './libs/localforage/dist/localforage.js',
  './libs/angular-localForage/dist/angular-localForage.js',
  './!(libs)/**/*.js'
];

gulp.task('js', function() {
  gulp.src(paths)
    .pipe(angularFilesort({ order: { pre: ['./libs/localforage/dist/localforage.js'] }}))
  ...
});

I made a first naïve implementation of this here: https://github.com/karlhorky/gulp-angular-filesort/commit/2c946a9f924bb9659c1d0caaa4b12444c1b2a35f

A better way would be to create vinyl file objects like they do in gulp-add-src.

@eddie
Copy link

eddie commented Feb 23, 2015

@karlhorky 👍 Perhaps a whitelist/blacklist option might be an idea.. In my case this problem happened when bower deps were being pushed to the bottom after angularFilesort

@simon04 simon04 mentioned this issue Aug 7, 2015
Closed
@JWorthe JWorthe mentioned this issue Oct 29, 2015
Closed
@joakimbeng joakimbeng mentioned this issue Mar 23, 2016
Open
@elartix
Copy link

elartix commented Jul 5, 2016

I have the same issue

gulp.task('inject', ['scripts', 'styles'], function () {
  var injectOptions = {
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: false
  };

  var injectStyles = gulp.src([
    path.join(conf.paths.tmp, '/serve/app/**/*.css'),
    path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
  ], { read: false });

  var injectScripts = gulp.src([
    path.join(conf.paths.src, '/app/**/*.module.js'),
    path.join(conf.paths.src, '/app/**/*.js'),
    path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
    path.join('!' + conf.paths.src, '/app/**/*.mock.js')
  ])
  .pipe($.naturalSort('desc'))
  .pipe($.angularFilesort().on('error', conf.errorHandler('AngularFilesort'));

  return gulp.src(path.join(conf.paths.src, '/*.html'))
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe(wiredep(_.extend({}, conf.wiredep)))
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

Result:

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-messages/angular-messages.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>

<script src="../bower_components/jquery/dist/jquery.js"></script>

<script src="../bower_components/malarkey/dist/malarkey.min.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/modernizr/modernizr.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/nvd3/build/nv.d3.js"></script>
<script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script>

How I can fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@joakimbeng @elartix @karlhorky @eddie @automaticgiant