在 Node 中连接和缩小 JS 文件 [关闭]

Question

NodeJS 中是否有任何模块可以连接和缩小 JavaScript 文件？

Answer 1

也许不是您想要的，但Enderjs 可以工作。

Answer 2

UglifyJS 是一个关于缩小 javascript 的 Node 模块。我不认为它也加入文件，但我可能错过了一个选项。

编辑： 使用UglifyJS 2，它还内置了串联。

如果您想在您的节点应用程序中内联执行此操作，那真的很容易。这允许您在运行时动态生成缩小/连接的 js 脚本，而无需使用 grunt 或 yeoman 方式。

npm install uglify-js

在你的模块中：

var fs = require('fs');
var uglify = require("uglify-js");

var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']);

fs.writeFile('concat.min.js', uglified.code, function (err){
  if(err) {
    console.log(err);
  } else {
    console.log("Script generated and saved:", 'concat.min.js');
  }      
});

Answer 3

如果您使用的是 Connect，那么我在 Connect-Assetmanager 上运气不错

Answer 4

我肯定会推荐 Closure Compiler 的简单模式。

Answer 5

如果您喜欢 Rails 3.1 资产管道方法，您应该试试我的 connect-assets 库。

Answer 6

您最好使用 gulp / webpack 之类的东西来合并/组织/捆绑您的资产。

---

为了加入 js 文件，你可以像在 twitter bootstrap makefile 中那样做

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js

这只是文件的串联，输出到 js 文件

然后你可以安装uglify-js来缩小js：

npm -g install uglify-js

并使用您的 path/file.js ofc 执行此命令：

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js

正如自 uglifyjs 2 以来的 cmets 中所述，您也可以这样做：

uglifyjs --compress --mangle -- input.js

Answer 7

我推荐使用UglifyJS，它是一个用于 NodeJS 的 JavaScript 解析器 / 处理器 / 压缩器 / 美化器库。

如果您对不仅仅是连接和缩小文件的自动化工具感兴趣，可以使用以下解决方案：

• GruntJS 是用于 JavaScript 项目的基于任务的命令行构建工具。当前版本具有以下内置任务：

  1. concat - 连接文件。
  2. init - 从预定义的模板生成项目脚手架。
  3. lint - 使用 JSHint 验证文件。
  4. min - 使用UglifyJS 缩小文件。
  5. qunit - 在无头 PhantomJS 实例中运行 QUnit 单元测试。
  6. 服务器 - 启动静态 Web 服务器。

除了这些任务之外，还有很多 plugins 可用。

• Gulp 是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于 web 开发（如果那是你的事），它可以通过 CSS 预处理、JS 转译、缩小、实时重新加载等等来帮助你。所有主要的 IDE 都内置了集成，人们喜欢跨 PHP、.NET、Node.js、Java 等的 gulp。拥有超过 1700 个插件（并且您可以在没有插件的情况下做很多事情），gulp 让您不再纠结于构建系统并重新开始工作。

• Yeoman 是一套强大且自以为是的工具、库和工作流程，可帮助开发人员快速构建美观、引人注目的网络应用程序。

  1. 闪电般快速搭建 - 使用可自定义的模板（例如 HTML5 Boilerplate、Twitter Bootstrap）、AMD（通过 RequireJS）等轻松搭建新项目。
  2. 自动编译 CoffeeScript 和 Compass - 我们的 LiveReload 监视进程会自动编译源文件并在进行更改时刷新您的浏览器，因此您不必这样做。
  3. 自动检查您的脚本 - 您的所有脚本都会自动针对 jshint 运行，以确保它们遵循语言最佳实践。
  4. 内置预览服务器 - 不再需要启动您自己的 HTTP 服务器。我的内置命令只需一个命令即可触发。
  5. 很棒的图片优化 - 我使用 OptiPNG 和 JPEGTran 优化了您的所有图片，这样您的用户就可以花更少的时间下载资源，而有更多的时间使用您的应用。
  6. AppCache 清单生成 - 我为您生成应用程序缓存清单。只需建立一个项目并繁荣。您将免费获得它。
  7. Killer 构建过程 - 您不仅可以获得缩小和连接；我还优化了您的所有图像文件、HTML、编译您的 CoffeeScript 和 Compass 文件，为您生成应用程序缓存清单，如果您使用的是 AMD，我们将通过 r.js 传递这些模块，因此您不需要不必。
  8. 集成包管理 - 需要依赖项？只需按一下键即可。我允许您通过命令行轻松搜索新包（例如，yeoman search jquery），安装它们并保持更新，而无需打开浏览器。
  9. 支持 ES6 模块语法 - 尝试使用最新的 ECMAScript 6 模块语法编写模块。这是一项实验性功能，可转译回 ES5，因此您可以在所有现代浏览器中使用该代码。
  10. PhantomJS 单元测试 - 通过 PhantomJS 在无头 WebKit 中轻松运行单元测试。当您创建新应用程序时，我还会为您的应用程序添加一些测试脚手架。

Answer 8

试试这两个 Grunt 插件

https://www.npmjs.org/package/grunt-contrib-concat

https://www.npmjs.org/package/grunt-contrib-uglify

你可以像这样安装你需要的一切：

npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify

然后创建你的 grunt 文件，如下所示：

Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    concat: {
      options: {
        process: function(src, path){
          return '\n/* Source: ' + path + ' */\n' + src;
        }
      },
      src: [
        '../src/**/*.js'
      ],
      dest: '../bin/app-debug.js'
    },
    uglify: {
      src: '../bin/app-debug.js',
      dest: '../bin/app.js'
    },
    watch: {
      options: {
        atBegin: true,
        event: ['all']
      },
      src: {
        files: '../src/**/*.js',
        tasks: ['concat']
      },
      dist: {
        files: '../bin/app-debug.js',
        tasks: ['uglify']
      },
    }
  }

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('default', ['watch']);
}

最后，在终端中输入grunt，Grunt 将开始观察你的 JavaScript 文件是否有变化，并自动连接和丑化它们（每当你在 ../src/ 中保存对 js 文件的更改时）

Answer 9

如果您已经拥有uglify-js，您的代码使用了一些最新的ES6 features (ECMAScript 2015)，它只会在第一次运行时返回解析错误，然后安装uglify-es ：

npm install uglify-es -g

或者：

npm install mishoo/UglifyJS2#harmony

解释在uglify-js-es6 package：

这是一个临时包，包含 uglifyjs (UglifyJS2) 的 'harmony' branch 的最新版本。

您仍然可以使用uglifyjs 命令正常运行它。压缩和破坏示例：

uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js

这将生成一个包含文件夹中所有 JS 文件的单个文件。双破折号 (--) 只是防止输入文件被用作选项参数。