Merging javascript files in the correct order

Question

I have a javascript app where I have split the code into files in different namespaces, like this:

// file 1: src/Main.js
var Main = function () { .... 

// file 2: src/Main/SomethinElse.js
Main.SomethingElse = function () { ....

etc....

The problem with this when minified is when these files are merged the first file has to be always first and then the second one.

Right now I have a bash script that does the compiling, in there I have list of all the files in the proper order, but I have to add every new file into the list after creating it, which does not seem very nice.

Is there any build tool to deal with this or maybe some way to restructure my code in order to avoid this problem ?

Grunt and concat. You can specify the first file that needs to be loaded before all the others. — Andy
– Andy, Commented Sep 14, 2015 at 13:26

Pascal · Accepted Answer · 2015-09-14 14:32:57Z

1

I would choose Gulp to build your project. It's easy to understand and has alot of plugins for your build. Link

If you want to use Gulp you can create a Task there like this:

gulp.task('scripts', function() {
    gulp.src([
        'src/Main.js', // take main js file first
        'src/*.js', // take all js files in src
        'src/Main/SomethinElse.js'])
        .pipe(sourcemaps.init()) // create sourcemaps for your code
        .pipe(concat('index.js')) // create one js file for example index.js
        .pipe(stripDebug()) // you can debug here
        .pipe(uglify()) // minify your js file
        .pipe(sourcemaps.write('maps/')) // sourcemap destination
        .pipe(gulp.dest('scripts/')); // destination of your js file
});

Hope i could help you.

answered Sep 14, 2015 at 14:32

Pascal

1225 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gotha Over a year ago

gulp is way more advanced than my bash script, but in the end I still have to enter file paths the same way. I was hoping for some more elegant solution, but it seems there is nothing better. At least with gulp I have the "*.js" part, which is something. Thanks for your answer and example.

Andrew Murphy · Accepted Answer · 2018-04-06 13:15:50Z

0

Easy (but inelegant) way round it is to prefix your source files with a number

That way, you can be sure main is defined before main.example

00_header.js
10_main.js
20_main/00_header.js
20_main/10_example.js
99_on_ready.js

Also, on linux, sort is LC_ALL dependant - see man sort.

answered Apr 6, 2018 at 13:15

Andrew Murphy

1,4651 gold badge13 silver badges11 bronze badges

Collectives™ on Stack Overflow

Merging javascript files in the correct order

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related