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 –

thebringking · Accepted Answer · 2014-12-13T02:20:27.193

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)

thanks for your comment and code snippet after reviewing it , i found that there an error when i calls the java script files in two files begins with src/pu.. which is not necessary at all and after that write the right src so i didn't discovered that the result file is not completed @thebringking — , Dec 13 '14 at 02:53
webpack is also excellent to handle this kind of task in a standardized way — Andreas, Dec 13 '18 at 08:01

score 0 · Answer 2 · answered Dec 13 '14 at 01:56

0

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

answered Dec 13 '14 at 01:56

AngularLover

364
1
12

i need the files to be concatenated in some orders like first add 1.js then add 2.js after it so i wrote them in sequence but this way didn't work for me too – Dec 13 '14 at 02:03
grunt.loadNpmTasks('grunt-contrib-concat'); This will do your orders. just use this extension. – AngularLover Dec 13 '14 at 02:09

using grunt to CONCATENATE FILES in sequence

2 Answers2

Linked