using grunt to CONCATENATE FILES in sequence

Question

i'm new to grunt and i want to concatenate java script files to one file using grunt and i have 6 js files but they need to be in some sequence to run the code without errors like jquery should loaded in first but the result file which came from grunt not preserve this sequence i tried many things like arrange them in src or make more than one folder but it didn't work

note - when i make manual concatenation in one file by copy and paste it works fine so is there any command to make grunt concatenate this files in the secuquence that i wrote them in src as example this is my gruntfile.js too

module.exports = function(grunt) {

  // 1. All configuration goes here
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),




    // 1 - this is contecnate js files call them in one file only
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/public/js/jquery.min.js','src/public/js/bootstrap.js','public/js/modernizr.custom.77555.js',
          'public/js/jquery.magnific-popup.js',
     'public/js/jquery.mixitup.min.js','public/js/popup-box.js' ],
        dest: 'dist/1newbuilt.js',
      },
    },



    uglify: {
      build: {
        src: 'dist/1newbuilt.js',
        dest: 'dist/1newbuilt.min.js'
      }
    }


  });

  // end 1 - this is contecnate js files call them in one file only







  // 3. Where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
  grunt.registerTask('default', ['concat', 'uglify']);

};

i need the files to be concatenated in some orders like first add 1.js then add 2.js after it so i wrote the files in sequence but this way didn't work too –

Answer 1

you dont have to write all your JS-files. Just use the wildcard.

concat: {
      js: {
        src: 'src/public/js/*.js',
        dest: 'dest/js/concat.js'
      },

Your min task

 min: {
      js: {
        src: 'dest/js/concat.js',
        dest: 'dest/js/concat.min.js'
      }
    },

Answer 2

If you want to continue to use grunt-contrib-concat, and manually specify your sources explicitly, like you have it should work. What order are you seeing the modules in? Have you removed the uglify option and just used the concat option? This grunt config correctly puts the combined scripts in order.

module.exports = function(grunt) {
// 1. All configuration goes here
  grunt.initConfig({




    // 1 - this is contecnate js files call them in one file only
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['a.js','b.js'],
        dest: 'built.js',
      },
    }
  });

  // end 1 - this is contecnate js files call them in one file only
// 3. Where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-concat');


  // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
  grunt.registerTask('default', ['concat']);

}

this produces a result like this-

(function(){
    console.log("module a");
})();
;(function(){
    console.log("module b");
})();

Also, just for styles sake, I don't see a need for a semi-colon separator. Another piece of un-solicited advice if you really need to specify a dependency order in your JS files, you should move towards using a module loader like RequireJS, Browserify, or ES6 Modules (with a transpiler of some sort)