Some modules not supported

automaticgiant commented 10 years ago

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 commented 10 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

@karlhorky :+1: 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

elartix commented 8 years ago

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?

klei / gulp-angular-filesort

Some modules not supported #8