Concatenate files with npm as build tool

2020-05-31 22:08发布

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/**"
  }
}

5条回答
男人必须洒脱
2楼-- · 2020-05-31 22:38

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

查看更多
Anthone
3楼-- · 2020-05-31 22:45

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");
查看更多
爷的心禁止访问
4楼-- · 2020-05-31 22:46

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

"scripts": {
  "concat": "cat www/js/**/*.js > all.js"},
查看更多
beautiful°
5楼-- · 2020-05-31 22:56

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;
查看更多
三岁会撩人
6楼-- · 2020-05-31 23:03

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)
查看更多
登录 后发表回答