Concatenate files with npm as build tool

Question

I recently discovered that I can use npm as a task runner instead of gulp or grunt, everything is fantastic so far (lint, stylus, jade, uglify, watch .. etc) but the concatenation part, I cannot seem to achieve that. With gulp it was something like:

gulp.task('scripts', function() {
  return gulp.src('www/js/**/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('www/dist'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('www/dist'));
});

Is there a way I can do that with npm?

To be more clear, my goal is to do something like this:

// package.json

{
  "name": "f_todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "concat": "^1.0.0",
    "rerun-script": "^0.6.0",
    "stylus": "^0.53.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "stylus": "stylus ss --compress --out lib/stylesheets",
    "concat": "concat dependency code would be here",
    "dev": "rerun-script"
  },
  "watches": {
    "stylus": "ss/**"
  }
}

Have you tried looking at the `concat` package you where using for inspiration? — Malkus, Jan 28 '16 at 03:37
Yes, but i need something like `concat js/** --out all.js` in my package.json scripts object — Web Dev T, Jan 28 '16 at 03:51
See my solution for a similar question > https://stackoverflow.com/a/75336590/7472479 — Gokce Akcan, Feb 03 '23 at 14:06

vorant · Accepted Answer · 2016-01-28T04:48:55.107

18

try this

var concat = require('concat')    
concat(['a.css', 'b.css', 'c.css'], 'all.css')

https://www.npmjs.com/package/concat

and don't forget about npm install concat

By command use concat-glob-cli

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "concat": "concat-glob-cli -f path/to/**/*.js -o bundle.js",
    ...
 },

https://www.npmjs.com/package/concat-glob-cli

edited Jan 28 '16 at 04:48

answered Jan 28 '16 at 03:38

vorant

708
5
15

Hey thank you for your time, but im trying to achieve the concatenation using NPM as build tool, adding in my package.json something like this `"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "stylus": "cat ss new.styl && stylus ss --compress --out lib/stylesheets", "dev": "rerun-script" }, "watches": { "stylus": "ss/**" }` – Web Dev T Jan 28 '16 at 03:45
I added another variant, try it – vorant Jan 28 '16 at 04:49
Yey! it did the trick, i had to change this part `"concat": "concat-glob-cli -f path/to/**/*.js -o bundle.js",` to `"concat": "concat-cli -f path/to/**/*.js -o bundle.js",` .. Thank you very much!! – Web Dev T Jan 28 '16 at 13:16
4

Is it gone? Will it come back? "This package name is not currently in use, but was formerly occupied by a popular package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it." from: https://www.npmjs.com/package/concat – Guntram Aug 03 '16 at 12:16
Both concat and concat-glob-cli are available again. – seagulledge May 01 '18 at 00:17

score 7 · Answer 2 · answered May 08 '20 at 22:59

7

You can also use the power of the shell to do what you want:

"scripts": {
  "concat": "cat www/js/**/*.js > all.js"},

answered May 08 '20 at 22:59

yagni

1,160
13
15

1

Why is this not the accepted answer? It's almost like people *want* overengineering. – Lea Verou Dec 02 '21 at 14:42
2

This creates a dependency on the shell and will not work on the standard command prompt in Windows, for example. – rmac Aug 30 '22 at 10:08

score 2 · Answer 3 · answered Sep 23 '16 at 09:14

Yep, concat is gone. I was looking at this as well while moving away from gulp to pure node and found the package to be missing.

As an alternative I am now using buildify. Might be a slight overkill, but it works.

var buildify = require('buildify');
var files = [
    "./node_modules/moduleA/file1.js",
    "./node_modules/moduleB/file2.js",
];

buildify()
    .concat(files)
    .save("./dist/www/scripts/init.min.js");

guy mograbi · Answer 4 · 2016-11-14T20:59:33.867

2

I am using concat-files

And I noticed there's also concatenate-files

Both are pretty simple.

Also note writing your own is pretty simple too:

var output = files.map((f)=>{
  return fs.readFileSync(f).toString();
}).join(';')

fs.writeFileSync('dist/bundle.js', output)

edited Nov 14 '16 at 20:59

answered Nov 14 '16 at 20:33

guy mograbi

27,391
16
83
122

score 0 · Answer 5 · answered Dec 15 '16 at 14:51

The concat package is no longer available. I would suggest using concat-with-sourcemaps https://www.npmjs.com/package/concat-with-sourcemaps

var concat = new Concat(true, 'all.js', '\n');
concat.add(null, "// (c) John Doe");
concat.add('file1.js', file1Content);
concat.add('file2.js', file2Content, file2SourceMap);

var concatenatedContent = concat.content;
var sourceMapForContent = concat.sourceMap;

Concatenate files with npm as build tool

5 Answers5

Linked