gruntjs / grunt-contrib-concat Goto Github PK

Lets say i have folder structure as shown below. I want to generate the concatenated file name dynamically based on the folder name.

For example, the concatenated file names under folder1 & folder2 folders should be folder1-concat.js & folder2-concat.js respectively.

= source
== scripts

=== folder1
==== one.js
==== two.js
===== << folder1-concat.js >>

=== folder2
==== one.js
==== two.js
===== << folder2-concat.js >>

Thanks!

Is it possible to add a basedir option which will do something like this

src: [ 'public/js/libs/file1.min.js', 'public/js/libs/file2.min.js', 'public/js/libs/file3.min.js', 'public/js/libs/file4.min.js' ]

instead of carying around all this public/js/libs/ to put it inside basedir and specify only file1.min.js, ... file4.min.js in src.

Hi,
I am considering using concat together with a CMS system. The system has a file structure where each CMS module have each own folder. I consider putting each javascript in that folder and then using Grunt/concat to put all the files in one javascript file.

However I am worried about the order of the module javascript are placed in the target concatenated javascript which as I understand it cannot be controlled using concat.

I wonder if a solution would be to be able to add a line in the module javascripts like this:
// {"setting":"grunt", "task":"grunt-contrib-concat", "order":1}

That will allow for

• Shared settings across not only Grunt but also Gulp
• Settings shared across Grunt tasks
• Easy to extend with further settings, even custom settings

I must admit that I have no practical experience using grunt-contrib-concat, so perhaps it does not make sense.

" file: <%= {?} %> "

I get this error when using the current version published on npm.

Warning: Cannot read property 'srcRaw' of undefined Use --force to continue.
Aborted due to warnings.

Are comments in JS files indicating other JS files that are dependencies supported?

For example I'd like to put lines like the following at the top of my JS files:

#require other.js

or:

#include other.js

If possible, I would rather specify these dependencies within the JS files themselves rather than have to specify their order in the src array.

Upgraded to grunt 0.4.0a and installed grunt-contrib-concat 0.1.2rc6 but get this error when running a concat target. In my Gruntfile I have grunt.loadNpmTasks('grunt-contrib-concat'); and my concat target is like this:

concat: {
        debug: {
            src: [
                    js_dir + 'jquery-1.8.2.min.js',
                    js_dir + 'jquery-ui-1.9.2.custom.min.js',
                    src_dir + 'jquery.ui.menubar.js',
                    js_dir + 'knockout-2.1.0.js',
                    src_dir + 'default-src.js'
            ],
            dest: concat_dir + 'default-concat.js'
        }
 }

all of which worked previously with grunt 0.3

In comment.js:14... :)

I have this in my gruntfile

concat: {
      libs:{
        options: {
          separator: ''
        },
        dist: {
          src: ['public/dev/js/**/*.js'],
          dest: 'public/tmp/libs.temp.js'
        }
      },
      ext_libs:{
        options: {
          separator: '',
        },
        dist: {
          src: [
              'public/assets/jquery/js/jquery-1.10.2.js',
              'public/assets/jquery_ui/js/jquery-ui-1.10.3.custom.min.js', 
              'public/assets/backbone/backbone-min.js',
              'public/assets/bootstrap/js/bootstrap.js',
              'public/assets/moment/moment.min.js',
          ],
          dest: 'public/js/ext_libs.js',
        },
      }
    },

not show errors, but dosen't generate the files libs.min.js and ext_libs.js

Logs:

Running "less:development" (less) task
File public/css/style.css created.

Running "cssjoin:join" (cssjoin) task
File public/css/ext_styles.css created.

Running "concat:libs" (concat) task

Running "concat:ext_libs" (concat) task

grunt-cli v0.1.11
grunt v0.4.2
grunt-contrib-concat 0.1.3

thanks!

Grunt concat task excludes first few style definitions if the CSS file has a multiline comment in the beginning of one of the CSS files that is being concatenated.

How can keep the concat file utf-8 charset

i wish i could put source: [ "libs/**.js" ], and exception for "libs/duplicate.js".

will it be useful to implement something like:

    dist: {
        src: [ "libs/**.js" ],
        exclude: [ "libs/duplicate.js" ],
        dest: "result.js"
    }

?

thank you

How is it possible to concat a node package with all deps into one file?

Right now I have a task that I implemented borrowing code from the old grunt-concat task. I called it preprocess and it is part of what I happen to call grunt-r3m (yes, I'm not good with names). https://github.com/royriojas/grunt-r3m

I have special tokens in my file that are replaced during the concat process, to avoid iterate over the files again after concatenating them. I would like you consider adding a callback when processing your file during concatenation, that way I could receive the content of the file, do the replacement and return the new content with the replacements in place.

the following snippet uses the old format of the concat, and add another option "replacements" which I use to specify a set of regular expressions to be replaced with either a string value or a function that will process that value.

concat : {
  lib : {
    src: ['<banner:meta.banner>'].concat(libFiles),
    dest: JS_DEPLOY_PATH + 'lib.js',
    replacements : [{
      replace : /\/\/<editor-fold desc="test-region">[\s\S.]*\/\/<\/editor-fold>/,
      using : '//REPLACED_EDITOR_FOLD'
    }]
  }
}

I don't require you implement this, but if you provide a callback per each file, passing the filepath and the content of the file, I could use this to do the parsing in a custom created task instead of providing a whole task that not only concatenate files but also do the replacements.

so for example something like this would be very useful for me

 concat : {
   lib : {
      src: ['<banner:meta.banner>'].concat(libFiles),
      dest: JS_DEPLOY_PATH + 'lib.js',
      onFileProcess : function (filePath, content) {  
         /* I can do the replacement work here!
            for example if in my code I have a token like 
            [INCLUDE file="./template/some-javascript-template.tmpl"]
            I can interpret it as a custom command and replace this with the 
            javascript template. I use the filePath to resolve the file location relative to the original File

            or remove all the code inside a block that matches this

            /\/\/<editor-fold desc="test-region">[\s\S.]*\/\/<\/editor-fold>/

            which is supposed to be need only for test.
         */
         var content = processContent(content, filePath);

         return content; //this will be used instead of the content found in the file
      }
    }
}

If you want further clarification of in which scenarios could be useful this, please let me know. Or if you have a way to do it with grunt.template.process also let me know, I'm not familiar with that.

Also if you want help implementing that I would be more than willing to do it

i have got many different folders for css, ie many css files are scattered over the project across many folders and subfolders, with relative urls for images, backgrounds, fonts,etc.

when i tried concatenating using usemin, all css files were combined, but many css urls/links were not working bcz they were not updated according to new location. all links to resources that they were pointing to were broken because the new css code moved to a new common css location alongside the html files. they should have pointed to correct resources by updating links automatically acc to previous and new positions.
same problem for js also.

is there a solution for this? please help!

Currently it just silently fails.

I have the got the following structure

.
├── main.css
├── cyborg
|   ├── theme.css
|   └── layout.css
├── yeti
|   ├── theme.css
|   └── layout.css
├── (...several themes)

I want to concat main.css , theme.css,layout.css to theme.all.css , i.e. this structure -

.
├── main.css
├── cyborg
|   ├── theme.css
|   └── layout.css
|   └── theme.all.css
├── yeti
|   ├── theme.css
|   └── layout.css
|   └── theme.all.css
├── (...several themes)

Grunt Task

concat : {
            files: {
                nonull:true,
                expand:true,
                cwd:"/styles/",
                dest:"/styles/build/",
                src:["main.css","**/theme.css","**/layout.css"],
                ext:".all.css",
            }
        }

On building I am not getting the desired output.What am I missing ?

I have referred this http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

If you configure the plugin like this

    concat: {
      dist: {
        src: [
          'path/to/file3.js',
          'path/to/file2.js',
          'path/to/file1.js'
        ]
      }
    },

you get a file having content from file3 first, then file2 and so on.

If you configure the plugin like this

    concat: {
      dist: {
        src: [
          'path/to/{file3,file2,file1}.js'
        ]
      }
    },

you get a file having content from file1 first, then file2, file3 last.

Using {} globbing pattern, files get concatenated using alphabetical order instead of the one specified in the comma-separated list.

Do you agree it should use the latter?

If no source files are matched, prevent the creation of an empty destination file.

The nonull option is great if you want to error-out when src is empty, which is desirable for debugging situations. But it seems more reasonable (for non debug scenarios) to simply not create the destination file.

Creating an empty file (or file with nothing but banner) doesn't seem like it would ever be the expected result. The only two scenarios I would expect when src file(s) is empty are:

1. error out (possible: just use nonull)
2. silently do nothing (no input = no output)

I'm having an issue with grunt-contrib-concat (node error in vm). I know this isn't a support forum but in lieu of a grunt-contrib-concat forum, I'm posting it here.

Gruntfile, package and project structure is posted here: https://gist.github.com/dotnetCarpenter/5658361

node -v v0.10.8
npm -v 1.2.23

grunt concatproduces

node.js:891
    var fn = runInThisContext(source, this.filename, true);
             ^
TypeError: undefined is not a function
    at createWritableStdioStream (node.js:555:18)
    at process.stdout (node.js:613:16)
    at write (/Volumes/mystuff/dotnetCarpenter/Projects/IT-Kollektivet/pragmatic/node_modules/grunt/lib/grunt/log.js:78:12)
    at writeln (/Volumes/mystuff/dotnetCarpenter/Projects/IT-Kollektivet/pragmatic/node_modules/grunt/lib/grunt/log.js:85:3)
    at Object.log.writeln (/Volumes/mystuff/dotnetCarpenter/Projects/IT-Kollektivet/pragmatic/node_modules/grunt/lib/grunt/log.js:96:3)
    at writeln (/Volumes/mystuff/dotnetCarpenter/Projects/IT-Kollektivet/pragmatic/node_modules/grunt/lib/grunt/fail.js:39:13)
    at Object.fail.fatal (/Volumes/mystuff/dotnetCarpenter/Projects/IT-Kollektivet/pragmatic/node_modules/grunt/lib/grunt/fail.js:55:3)
    at process.uncaughtHandler (/Volumes/mystuff/dotnetCarpenter/Projects/IT-Kollektivet/pragmatic/node_modules/grunt/lib/grunt.js:123:10)
    at process.EventEmitter.emit (events.js:95:17)
    at process._fatalException (node.js:272:26)

I might have misunderstood grunt config but the cssmin task is working fine.
Gruntfile.js:

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    cssmin: {
      compress: {
        files: {
          '<%= pkg.baseDir %>style.min.css': ['<%= pkg.baseDir %>css/shame.css', '<%= pkg.baseDir %>style.css', '<%= pkg.baseDir %>css/peer.css']
        }
      }
    },
    concat: {
      options: {
        stripBanners: true
      },
      dist: {
        src: ['<%= pkg.baseDir %>css/shame.css', '<%= pkg.baseDir %>style.css', '<%= pkg.baseDir %>css/peer.css']
      , dest: '<%= pkg.baseDir %>style.pack.css'
      }
    }
  });

  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // Default task(s).
  grunt.registerTask('default', ['cssmin']);

  // concat
  grunt.registerTask('concat', ['concat']);  
}

When I create a task like this:

concat: {
  options: {
    separator: ";"
  },
  test: {
    src: ["app/assets/js/locales/de/de/i18n.js", "app/js/libs/bower/moment/lang/de.js"],
    dest: "app/assets/js/locales/de/de/i18n.js"
  }
}

the output is that the lang/de.js file gets added to the original file twice. Am I doing this incorrectly?

if I have the following two files in my src directory:

• a.js
• B.js

When I concat the files using:
src: "src/*.js"

The output places B.js before a.js. Caps sort before lowercase. Shouldn't the sort be alphabetic?

Hi all -

I've been successfully running contrib-concat version 0.1.0 on a project. When upgrading to 0.1.1, I'm suddenly getting the error

Warning: Cannot read property 'src' of undefined Use --force to continue.

when running my concat targets. The config I'm using for concat can be found here: https://gist.github.com/4080345

Matt

Hey It would be really useful if It were possbile to exclude certain files from concatenation.
I could be explicit about all the CSS files I want to include, I have quite a few, I figured it would be better to say..
"Include all except these"

eg.

    concat: {
        css: {
            src: 'assets/css/*.css',
            dest: 'assets/css/main.css',
            exclude: 'type.dev.css'
        }
    },

Just the title,why?Thanks.

tried your example alone with v0.3.0, doesnt seem to work :(

exe + 7zip archive = a file that is twice as big as it should be and is corrupted.

is it meant to not overwrite the file? i can run concat with no errors and get success but the dest file is not overwritten. if i delete it, and rerun, it gets created.

for example instead of this:

concat: {
  build: {
    src: [ 'files/jquery.js', 'files/underscore.js', 'files/backbone.js' ],
    dest: 'script.js'
    }
}

we'd be able to do this:

concat: {
  build: {
    src: [ 'files/*.js' ],
    dest: 'script.js'
    }
}

when I include a file that does not exist in src option, grunt not report an error!
This is a problem! because some library files in the chain was a wrong path but has not been reported

I use bower & use this task to concat some files, but sometimes when somebody add a new repo to bower & modify concat task with some new files, I don't get any error or warning if I don't have the file (I know that I need to just run bower install, but it's not the real issue here :p)
Do you plan to add an option to trigger an error ? Or maybe I just miss a grunt option to fail on warning ?

I know this seems a bit unusual, but it would be nice if I could have them, since the errors are from the big destination file, not my small source files, which makes my life hard to find the line in the source files.

Given this simple setup:

concat: {
options: {
stripBanners: false,
separator: '\n/* path to js file /\n'
},
dist: {
src: ['js/.js'],
dest: 'dist/<%= pkg.name %>-concat.js'
}
}

Is there any way to dynamically include the concatenated path in each separator?

The ideal concatenated file should look like:

/* js/file1.js */
var someFunction = function(){

}

/* js/file2.js */
var anotherFunction = function(){
}

Thanks,

Seb.

I want to just add a header to every files in a folder. Is it possible to do with the plugin?

I would expect something like this:

    concat: {
      options: {
        banner: header
      },
      target : {
        src : ['src/lib/**/*.js'],
        dest : 'distr/'
      }
    }

Since grunt-custom don't have support for grunt 0.4 and last commit was 4 months ago it would be nice to have custom build funcionality in grunt-contrib-concat.

The correct value of filepath should be f.cwd + filepath.

var src = banner + f.src.filter(function(filepath) {
// Warn on and remove invalid source files (if nonull was set).
if (!grunt.file.exists(filepath)) {
grunt.log.warn('Source file "' + filepath + '" not found.');
return false;
} else {
return true;
}
})

Hi,

Maybe I'm overlooking something, but I'd love to have the ability to specify a "glogal" process and a task-level process, like:

concat : {
    options : { process : function() { ... global process ... }, },
    dev : {
       options : { process : function() { ... task-level process ... }, },
    },
    // ...
}

... when doing the above, only the task-level process works. If I remove the task-level, then the global one works.

Is this a limitation of how the process option works? Would it be possible to allow for the scenario above (i.e., have both work, not just one)?

Thanks so much! Love this task, it's so useful. 👍

Right now it's a little simple. Maybe we can add more filtering options. Or something. Whatever.

Hi,
My contat doesn't works ?

     concat: {
       options: {
        // define a string to put between each file in the concatenated output
        separator: ';'
      },
       dist: {
          // the files to concatenate
          src: [
              //'assets/javascript/components/*.js',
              'assets/javascript/components/jquery-ui-1.10.3.custom.js',
              'assets/javascript/components/spectrum.js',
              'assets/javascript/components/prefixfree.min.js',
             'assets/javascript/src/jquery.menu_css3.js'
          ],
          // the location of the resulting JS file
          dest: 'assets/javascript/jquery.<%= pkg.name %>.min.js'
        }
      },

Thanks

how can I concatenate the files in a specific order?

I'm using regexp to concatenate multiple files but I need one of them to be at the end.

Brunch.io has something like this:

    javascripts:
      joinTo:
        'javascripts/app.js': /^app/
        ...
      order:
        before: [
           ...
        ]
        after: [
          ...
        ]

Thanks

How can I have Grunt abort when some file is missing in a concat task?
You use grunt.log.warn to warn, why not use grunt.warn?
Maybe provide an strict option or something.

I'd like to add a banner on top of my concatenated files that tells me which filepath were concatenated.

{
  concat: {
    dist: {
      "out1.js": ["src/one/file1.js", "src/one/file2.js"],
      "out2.js": ["src/two/another1.js", "src/two/another2.js"]
    }
  }
}

What I'd like to have as output is

• out1.js

/**
 * This file is the concatenation of
 * src/one/file1.js
 * src/one/file2.js
 */
// code of file1.js ...
// code of file2.js ...

Similar output for out2.js

grunt-contrib-concat has two options that seem to do the job, but

• banner: this is generated once for all destination files, it has no knowledge of individual files
• process: this is done for every source file, not for the destination file

Using process I'd get

// I can add some code here
// code of file1.js ...
// and I can add some code here
// code of file2.js ...

What about adding another option to process the destination file?

Say for instance changing line 38 and following to be

// Instead of 
/**
var src = banner + f.src.filter(
    ...
).join(options.separator) + footer;
**/
var src = banner + options.processDestination(
    f.src.filter(/* ... */).join(options.separator), f.dest
) + footer;

So basically adding processDestination as a function with the same signature of process but working on destination file.

What do you think?

Hello everybody:
My project has two different folders that contains css files for the same html. Now if I use grunt-concat to concatenate, the target file's referrence to img would generate error.
What can I do? Is there any configuration for the reference html file?

Sometimes due to technical peculiarities you just cannot rely on the global environment.
Also, it would be nice to have an opportunity to test different builds of compass without any changes of environment at all - (you'll even can do something like grunt:compass:3.4alpha)

Hello. I'm new to Grunt so I apologise if I'm doing something stupid.

I see there's been some discussion on concat ignoring missing files and I keep reading that if nonull is set to true then there is at least a warning. I've tried setting nonull to true but it's not making a difference for me. There's no indication at all that a file doesn't exist.

My Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    options: { nonull: true, },
    concat: {
      options: { nonull: true, },
      all: {
        options: { nonull: true, },
        nonull: true,
        files: {
          'all.con.js': [
            '.bower/bootstrap/dist/js/bootstrap.js',
            '.bower/jquery.ui/ui/jquery.ui.core.js',
            '.bower/jquery.ui/ui/jquery.ui.effect.js',
            '.bower/jquery.ui/ui/jquery.ui.effect-drop.js',
            'xxxxxxxxxx.js',
            'src/main/javascript/application.js',
          ],
        },
      },
    },

  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['concat']);
};

Obviously xxxxxxxxxx.js doesn't exist.

This is the output:

> grunt 
Running "concat:all" (concat) task
File "all.con.js" created.

Done, without errors.

If src is set with a non existing/readable file (or with an array containing at least one non existing/readable file) then the task does not fail nor warns about it.

I'd strongly prefer it to fail, or at least it would be useful a new option "checkSrcFile" (false by default). If set to true then the concat task would fail if any of the files in src does not exist.

I use exclusively LF line endings in all of my files. However I develop on Windows, so grunt concat always joins the files with CRLF, even if they are all LF.

Can there be either an option to choose which line endings I want, or perhaps concat could detect line endings in src files and use that?

In older grunt I used internal concat helper like the following

var combined = grunt.helper('concat', src, { separator: '' });

So how should I use it at now by using grunt-contrib-concat plugin?

I have a fix for this, basically check whether the filepath contains a file before reading it, line 50 of lib/concat.js

        if(grunt.file.isDir(filepath) === true){
          return;
        }
         // Read file source.
        var src = grunt.file.read(filepath);

When i try execute grunt concat i get this warning

Running "concat:source" (concat) task
Warning: Unable to write "dist/built.js" file (Error code: undefined). Used --force, continuing.

Someone can guide me how to proceed?