klei / gulp-angular-filesort

Automatically sort AngularJS app files depending on module definitions and usage
MIT License
132 stars 46 forks source link

Sort files on gulp-inject index task #47

Open m-ret opened 8 years ago

m-ret commented 8 years ago

I am trying to sort my files since I am getting an Angular error because of the sort of the files.

This is my Gulp file

    var gulp = require('gulp');
    var angularFilesort = require('gulp-angular-filesort');
    var naturalSort = require('gulp-natural-sort');
    var inject = require('gulp-inject'); 

    gulp.task('index', function () {
      var target = gulp.src('./public/index.html');
      var sources = gulp.src(
          ['./**/*.js', './**/*.css'],
          {
            read: false,
            cwd: __dirname + "/public/",
          }
        ).pipe(angularFilesort());

      return target.pipe(inject(sources, { addRootSlash: false }))
        .pipe(gulp.dest('./public'));
    });

the files are sorting like this

        <!-- inject:js -->
        <script src="app.js"></script>
        <script src="controllers/add.js"></script>
        <script src="controllers/main.js"></script>
        <script src="filters/fromNow.js"></script>
        <script src="services/show.js"></script>
        <script src="vendor/angular-cookies.js"></script>
        <script src="vendor/angular-messages.js"></script>
        <script src="vendor/angular-resource.js"></script>
        <script src="vendor/angular-route.js"></script>
        <script src="vendor/angular-strap.js"></script>
        <script src="vendor/angular-strap.tpl.js"></script>
        <script src="vendor/angular.min.js"></script>
        <script src="vendor/moment.min.js"></script>
        <!-- endinject -->

and here the folders

enter image description here

and the console errors

enter image description here

so what am I missing?

malkomich commented 8 years ago

You shouldn't use read: false This way the files can't be well sorted and angular library is not injected before your module.

Note that <script src="vendor/angular.min.js"></script> should be the first to get it working.