broccoli-concat

What is broccoli-concat?

The broccoli-concat npm package is a Broccoli plugin used to concatenate multiple files into a single file. It is commonly used in build processes to combine JavaScript, CSS, or other types of files to reduce the number of HTTP requests and improve load times.

What are broccoli-concat's main functionalities?

Concatenate JavaScript files

This feature allows you to concatenate all JavaScript files in the 'src/js' directory into a single file named 'app.js' in the 'assets' directory. Source maps are also enabled for easier debugging.

const concat = require('broccoli-concat');

const jsTree = concat('src/js', {
  outputFile: '/assets/app.js',
  inputFiles: ['**/*.js'],
  sourceMapConfig: { enabled: true }
});

Concatenate CSS files

This feature allows you to concatenate all CSS files in the 'src/css' directory into a single file named 'styles.css' in the 'assets' directory. Source maps are also enabled for easier debugging.

const concat = require('broccoli-concat');

const cssTree = concat('src/css', {
  outputFile: '/assets/styles.css',
  inputFiles: ['**/*.css'],
  sourceMapConfig: { enabled: true }
});

Custom file ordering

This feature allows you to specify a custom order for the files to be concatenated. In this example, 'jquery.js' and 'underscore.js' are concatenated first, followed by all other JavaScript files in the 'src/js' directory.

const concat = require('broccoli-concat');

const orderedJsTree = concat('src/js', {
  outputFile: '/assets/app.js',
  inputFiles: ['vendor/jquery.js', 'vendor/underscore.js', '**/*.js'],
  sourceMapConfig: { enabled: true }
});

Other packages similar to broccoli-concat

gulp-concat

gulp-concat is a Gulp plugin that concatenates files. It is similar to broccoli-concat but is used within the Gulp build system. It offers similar functionality but is more commonly used in Gulp-based workflows.

webpack-concat-plugin

webpack-concat-plugin is a Webpack plugin that concatenates files. It is similar to broccoli-concat but is used within the Webpack build system. It offers additional features like dependency resolution and is more commonly used in Webpack-based workflows.

grunt-contrib-concat

grunt-contrib-concat is a Grunt plugin that concatenates files. It is similar to broccoli-concat but is used within the Grunt build system. It offers similar functionality but is more commonly used in Grunt-based workflows.

README

Broccoli concatenator that generates & propagates sourcemaps

This filter is designed to be fast & good enough. It can generates source maps substantially faster than you'll get via mozilla/source-map, because it's special-cased for straight line-to-line contenation.

It discovers input sourcemaps in relative URLs, including data URIs.

Usage

const node = concat(node);

Advanced Usage

const node = concat(node, {
  outputFile: '/output.js',
  header: ";(function() {",
  headerFiles: ['loader.js'],
  inputFiles: ['**/*'],
  footerFiles: ['auto-start.js'],
  footer: "}());",
  sourceMapConfig: { enabled: true },
  allowNone: false | true // defaults to false, and will error if trying to concat but no files are found.
});

The structure of output.js will be as follows:

// - header
// - ordered content of the files in headerFiles
// - un-ordered content of files matched by inputFiles, but not in headerFiles or footerFiles
// - ordered content of the files in footerFiles
// - footer

Debug Usage

note: this is intended for debugging purposes only, and will most likely negatively affect your build performace is left enabled

Setting the environment variable CONCAT_STATS=true will result a summary of each concatention being output to process.cwd() + 'concat-stats-for/*.json'

Each file within that directory represents a different contenation, and will contain:

• outputFile – the output file that was created
• sizes – a summary of each input file, and the associated pre-minified pre-gziped byte size.

Want more details? like uglified or compressed sizes? (or have more ideas) go checkout: https://github.com/stefanpenner/broccoli-concat-analyser

Example:

concat-stats-for/-file.json

{
  "outputFile": "path/to/output/File",
  "sizes": {
    "a.js": 5,
    "b.js": 10,
  }
}

other files:

• concat-stats-for/-file/a.js
• concat-stats-for/-file/b.js