Question

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

Answer 1

我建议使用UglifyJS这是NodeJS的JavaScript解析器/ mangler / compress / beautifier库。

如果您对自动化工具感兴趣不仅仅是简单地连接和缩小文件，还有以下解决方案：

GruntJS是一个基于任务的JavaScript项目命令行构建工具。当前版本具有以下内置任务：
1. concat - 连接文件。
2. init - 从预定义的模板生成项目脚手架。
3. lint - 使用JSHint验证文件。
4. min - 使用UglifyJS缩小文件。
5. qunit - 在无头QUnit实例中运行PhantomJS单元测试。
6. server - 启动静态Web服务器。

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

Gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于Web开发（如果这是你的事情），它可以帮助你做CSS预处理，JS转换，缩小，实时重新加载等等。所有主要IDE都集成了集成，人们可以熟悉PHP，.NET，Node.js，Java等等。有超过1700个插件（并且你可以在没有插件的情况下做很多），让你放弃搞乱构建系统并重新开始工作。
Yeoman是一套强大而富有根据的工具，库和工作流程，可帮助开发人员快速构建精美，引人注目的网络应用。
1. Lightning-fast scaffolding - 使用可自定义的模板（例如HTML5 Boilerplate，Twitter Bootstrap），AMD（通过RequireJS）等轻松搭建新项目。
2. 自动编译CoffeeScript＆amp;指南针 - 我们的LiveReload监视进程会自动编译源文件，并在您进行更改时刷新您的浏览器，因此您无需这样做。
3. 自动lint您的脚本 - 所有脚本都会自动针对jshint运行，以确保他们遵循语言最佳做法。
4. 内置预览服务器 - 不再需要启动自己的HTTP服务器。只需一个命令即可触发我的内置文件。
5. 令人敬畏的图片优化 - 我使用OptiPNG和JPEGTran优化您的所有图片，这样您的用户就可以花更少的时间下载资源，花更多的时间来使用您的应用。
6. AppCache清单生成 - 我为您生成应用程序缓存清单。只需建立一个项目和繁荣。你会免费获得它。
7. 杀手制作过程 - 不仅可以缩小和连接;我还优化了所有图像文件，HTML，编译CoffeeScript和Compass文件，生成应用程序缓存清单，如果您使用的是AMD，我们将通过r.js传递这些模块所以你没必要。
8. 集成包管理 - 需要依赖吗？这只是一个击键。我允许您通过命令行轻松搜索新包（例如，yeoman搜索jquery），安装它们并保持更新，而无需打开浏览器。
9. 支持ES6模块语法 - 尝试使用最新的ECMAScript 6模块语法编写模块。这是一个实验性功能，可以转换回ES5，因此您可以在所有现代浏览器中使用该代码。
10. PhantomJS单元测试 - 通过PhantomJS在无头WebKit中轻松运行单元测试。当您创建新应用程序时，我还为您的应用程序添加了一些测试脚手架。

Answer 2

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

修改使用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

您最好使用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你也可以这样做：

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

Answer 5

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

Answer 6

尝试使用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文件以进行更改，并自动连接和uglify它们（每当您在... / src /

中保存对js文件的更改时

Answer 7

可能不完全符合您的要求，但Enderjs可以正常工作。

Answer 8

我肯定会建议Closure Compiler的简单模式。

Answer 9

如果您已经拥有uglify-js，那么您的代码会使用一些最新的ES6 features (ECMAScript 2015)，它会在第一次运行时给您回复解析错误，然后安装 uglify- e < /强>取值：

npm install uglify-es -g

或者：

npm install mishoo/UglifyJS2#harmony

解释在uglify-js-es6 package：

这是一个临时包，其中包含最新版本的'harmony' branch uglifyjs（UglifyJS2）。

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

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

这将生成包含文件夹的所有JS文件的单个文件。双短划线（--）只是阻止输入文件用作选项参数。

Concat并缩小Node中的JS文件

9 个答案: