CODEWITHSUNDEEP
javascriptgulpgulp-concatgulp-uglify
christo8989
christo8989

Reputation: 6826

How Do You Get Around Javascript File Order Using Gulp Or A Javascript Framework?

I'm using gulp to build a single javascript file with gulp-concat and gulp-uglify.

Original Files

//File 1
var Proj = Proj || {};

//File 2
Proj.Main = (function() { 
    var Method = function(){ /*Code*/ };
    return { "Method":Method };
})();

//File 3
Proj.Page = (function() { 
    var Method = Proj.Main.Method;
    return { "Method":Method };
})();

Gulp returns a bad minified file because these files are being concatenated in the wrong order. I know I can specify the order in .src([]) but I don't want to maintain the array as I add javascript files.

Is there a way to create references to these "namespaces" without having to worry about the order of the files concatenated? Or, is there a way for gulp to handle concatenation with the knowledge of these namespaces auto-magically?

EDIT:

I know I can specify the file order inside the .src([]). I want to develop without having to worry about the file order, whether it be through a gulp package or a javascript framework. Thank you for responses that help but I need a definitive "No. You cannot do this." or "Yes. Here's how..." to mark the thread as answered.

Upvotes: 2

Views: 1715

Answers (2)

the_5imian
the_5imian

Reputation: 896

Since it hasn't been mentioned, implementing webpack or browserify will absolutely solve this problem without implementing some sort of hacky feeling solution.

Here is a simple example of how to use it: 

var source = require('vinyl-source-stream'), //<--this is the key
    browserify = require('browserify');

    function buildEverything(){
        return browserify({
               //do your config here
                entries: './src/js/index.js',
            })
            .bundle()
            .pipe(source('index.js')) //this converts to stream
             //do all processing here.
             //like uglification and so on.
            .pipe(gulp.dest('bundle.js'));
        }
    }

    gulp.task('buildTask', buildEverything);

And inside your files you use require statements to indicate which files require others.

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19772

Well, one option is to try gulp-order.

Also, check out this answer to "gulp concat scripts in order?".

Basically, it mentions what you already said, about having to explicitly name the files in the order you want them to come in. I know you don't want to do that, but how else would gulp know which order you want your files in?

One thing worth pointing out, though, is that you have a group of files where the order doesn't matter, and then, say, 2 files where the order does matter, you can do something like this:

gulp.src([
    'utils/*.js',
    'utils/some-service.js',
    'utils/something-that-depends-on-some-service'
])

gulp-concat doesn't repeat files, so everything that's not some-service.js or something-that-depends-on-some-service.js will get concatenated first, and then the last two files will be concatenated in the proper order.

Upvotes: 3

Related Questions