How to merge a file with several other files, dynamically using Grunt?

Asked

Viewed 337 times

5

I have a problem that I cannot solve in any way. The problem is this:

I use the Grunt to automate the tasks of my projects, and in this case, I am using it as follows:

As I did in the above drawing, I would like to take all the Javascript files from the "DEV" folder and join with the "scripts.js" file to result in files with the same name and subdirectory, but located in the "JS" folder. I wanted to do all this dynamically, with directories and subdirectories.

My (test) code is this:

extras2: {
  options: {
    log: true
  },
  expand: true, // set to true to enable options following options:
  cwd: '<%= dirs.folder %>dev/js', // all sources relative to this path
  src: ['**/*.js', '!**/scripts.js', '!**/_base/**'], // source folder patterns to match, relative to cwd
  dest: '<%= dirs.folder %>js', // destination folder path prefix
  ext: '.js' // replace any existing extension with this value in dest folder
}

Remembering that the scripts file is in the "dev folder".

1 answer

3

To concatenate the files, you need to include the option concat in his Gruntfile:

concat: {
    options: {
        separator: ';'
    },
    dist: {
        src: ['dev/*.js'],
        dest: 'js/tudojunto.js'
    }
},
  • So I’m sorry, because I didn’t make it clear what the output would be like. The file that comes from the "Dev" folder will be compiled in the same corresponding directory, only in the "Js" folder, and of course with the "scripts.js" file merged.

  • I’m not sure I understand, but I edited the answer, see if that’s what you’re looking for.

  • First of all, thank you very much for your help. Then, the output files will be the same as the input files, that is, Grunt will not only generate a file, but multiple files with the same name and subdirectory. The idea is more or less like this: dev/scripts.js + dev/arquivo1.js = js/arquivo1.js, another example: dev/scripts.js + dev/classes/arquivo2.js = js/classes/arquivo2.js

  • 1

    Um, that’s already something I’ve never done, I don’t really know much about Grunt. Let’s wait then, someone who knows more than I and can give you a decent answer.

  • Really, this is kind of complicated. I had this same problem with . Less, but Less still has the ability to use "@import" to import a certain code during conversion to css. The code I put above was based on the solution I found in the case of Less. In the case of . js, I searched, tried several times, but I didn’t get any results. Still thanks for the help!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.