4

I am concatenating and minifying js files using gulp. But files are not concatenating in the order it should be, like this is the order I want :

 var scriptFiles = [
  'assets/lib/js/angular.min.js',
  'assets/lib/js/angular-sanitize.min.js',
  'assets/lib/js/angular-route.min.js',
  'assets/lib/js/angular-ui-router.min.js',
  'assets/lib/js/angular-css.min.js',
  'assets/lib/js/angular-select.min.js',
  'assets/lib/js/duration.js',
  'assets/lib/js/ui-codemirror.min.js',
];

The problem is, after concatenation ui-codemirror.min.js file goes to top of the compiled file, which breaks the javascript since angular.js is not initialized/loaded.

To solve this problem I tried to use "gulp-order" package and wrote this gulp task:

gulp.task('lib-js', function() {
  return gulp.src(scriptFiles)
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(order(scriptFiles, { base: './' }))
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('assets/compiled/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('assets/compiled/js'))
});

I passed the same scriptFiles array to try to preserve the order. But it did not work.

Then I tried the streamqueue plugin, and change the task:

gulp.task('lib-js', function() {
  return streamqueue({ objectMode: true },
      gulp.src('assets/lib/js/angular.min.js'),
      gulp.src('assets/lib/js/angular-sanitize.min.js'),
      gulp.src('assets/lib/js/angular-route.min.js?v=20161018-1'),
      gulp.src('assets/lib/js/angular-ui-router.min.js'),
      gulp.src('assets/lib/js/angular-css.min.js'),
      gulp.src('assets/lib/js/angular-select.min.js'),
      gulp.src('assets/lib/js/jquery-2.1.1.min.js'),
      gulp.src('assets/lib/js/material.min.js'),
      gulp.src('assets/lib/js/ocLazyLoad.min.js'),
      gulp.src('assets/lib/js/duration.js'),
      gulp.src('assets/lib/js/ui-codemirror.min.js')
    )
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('assets/compiled/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('assets/compiled/js'))
});

This did not work either. I am unable to debug why this is happening. "order" and "streamqueue" plugin had not effect on the output. Any idea/solution?

Rahul Sagore
  • 1,588
  • 2
  • 26
  • 47
  • Possible duplicate of [gulp-uglify won't preserve files order](http://stackoverflow.com/questions/39510601/gulp-uglify-wont-preserve-files-order) – Sven Schoenung Nov 19 '16 at 21:32
  • Try to eliminate everything apart from the `concat` step from your pipeline to make sure if it's not another plugin that is breaking the order. – jannis Nov 19 '16 at 21:33
  • 1
    Thanks @SvenSchoenung, it was happening because ui-codemirror function was hoisting due to uglify plugin. After adding `uglify({compress: { hoist_funs: false }}`, it worked. Thanks for the help @jannis – Rahul Sagore Nov 20 '16 at 11:38

0 Answers0