Help please solve the problem

There is a js-project. The source code is in the src directory, the production code in the build directory. I use gulp for the build.

Here are my js source files. After the build, the resulting file looks like this.

The problem is that the line

var tests=angular.module('tests',['ngMaterial'])

located at the end of the file. It should be at the beginning because the module itself is declared in this line. The rest of the code only complements it.

Please teach how to build a project correctly. That is, first, the module declaration code is recorded in the resulting js-file, and then everything else.

I give the gulpfile.js code:

 'use strict'; var gulp = require('gulp'); var cssmin = require('gulp-cssmin'); var rename = require('gulp-rename'); var jsmin = require('gulp-jsmin'); var concat = require('gulp-concat'); var clean = require('clean'); var del = require('del'); var mainBowerFiles = require('gulp-main-bower-files'); var imagemin = require('gulp-imagemin'); var browserSync = require('browser-sync').create(); gulp.task('clean', function() { return del.sync(['build/*', 'libs/*.*']); }); gulp.task('cssmin', function () { gulp.src(['src/libs/**/*.css', 'src/css/*.css']) .pipe(cssmin()) .pipe(concat('styles.min.css')) .pipe(gulp.dest('build/css')); }); gulp.task('main-bower-files', function() { return gulp.src('./bower.json') .pipe(mainBowerFiles()) .pipe(gulp.dest('./src/libs')); }); gulp.task('libsmin', function () { gulp.src('src/libs/**/*.js') .pipe(concat('libs.min.js')) .pipe(gulp.dest('build/js')); }); gulp.task('jsmin', function () { gulp.src('src/js/*.js') .pipe(jsmin()) .pipe(concat('scripts.min.js')) .pipe(gulp.dest('build/js')); }); gulp.task('imagesReplace', function() { return gulp.src(['src/images/*']) .pipe(gulp.dest('build/images')); }); gulp.task('html', function() { return gulp.src(['src/*.html']) .pipe(gulp.dest('build/')); }); gulp.task('watch', function() { gulp.watch(['src/*.html'], ['html', browserSync.reload]); gulp.watch(['src/libs/**/*.js'], ['libsmin', browserSync.reload]); gulp.watch(['src/js/**/*.js'], ['jsmin', browserSync.reload]); gulp.watch(['src/images/**/*'], ['imagesReplace', browserSync.reload]); gulp.watch(['src/css/*.css'], ['cssmin', browserSync.reload]); }); gulp.task('default', ['clean', 'cssmin', 'main-bower-files', 'libsmin', 'jsmin', 'imagesReplace', 'html', 'watch']);

If important, the structure of the entire project looks like this.

    1 answer 1

    To set the order, you can put the module gulp-order

    For example:

     gulp.task('jsmin', function () { gulp.src('src/js/*.js') .pipe(order([ "vendor/app.js", "vendor/app2.js", "vendor/**/*.js", "app/**/*.js", "vendor/last.js", ])) .pipe(jsmin()) .pipe(concat('scripts.min.js')) .pipe(gulp.dest('build/js')); });