Using Grunt To Concatenate Files In Sequence

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 lik

Solution 1:

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 onlyconcat: {
      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)

Solution 2:

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'
      }
    },