使用 npm 作为构建工具连接文件

Concatenate files with npm as build tool

本文关键字：工具 连接 文件 构建 npm 使用      更新时间：2023-09-26

我最近发现我可以使用 npm 作为任务运行器而不是 gulp 或 grunt，到目前为止一切都很棒（棉绒、手写笔、玉石、丑陋、手表......等），但串联部分，我似乎无法做到这一点。大口大口地是这样的：

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'));
});

有没有办法用 npm 做到这一点？

更清楚的是，我的目标是做这样的事情：

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

试试这个

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

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

不要忘记npm install concat

通过命令使用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

您还可以使用 shell 的强大功能来执行您想要的操作：

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

是的，concat 消失了。在从 gulp 移动到纯节点时，我也在查看这个，发现包丢失了。

作为替代方案，我现在正在使用buildify。可能有点矫枉过正，但它有效。

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");

我正在使用concat-files

我注意到还有连接文件

两者都很简单。

另请注意，编写自己的代码也非常简单： 

var output = files.map((f)=>{
  return fs.readFileSync(f).toString();
}).join(';')
fs.writeFileSync('dist/bundle.js', output)

concat 软件包不再可用。我建议使用concat-with-sourcemapshttps://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;
相关文章：