Concat并缩小Node中的JS文件

Question

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

Answer 1

我建议使用UglifyJS,它是NodeJS的JavaScript解析器/ mangler /压缩器/美化库.

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

• GruntJS是一个基于任务的JavaScript项目命令行构建工具.当前版本具有以下内置任务:

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

除了这个任务,还有很多可用的插件.

• Gulp是一个工具包,可以帮助您在开发工作流程中自动执行痛苦或耗时的任务.对于Web开发(如果这是你的事情),它可以帮助你做CSS预处理,JS转换,缩小,实时重新加载等等.所有主要IDE都集成了集成,人们可以熟悉PHP,.NET,Node.js,Java等等.有超过1700个插件(并且你可以在没有插件的情况下做很多),gulp让你放弃搞乱构建系统并重新开始工作.

• Yeoman是一套强大而富有根据的工具,库和工作流程,可以帮助开发人员快速构建漂亮,引人注目的Web应用程序.

  1. Lightning-fast脚手架 - 使用可定制的模板(例如HTML5 Boilerplate,Twitter Bootstrap),AMD(通过RequireJS)等轻松搭建新项目.
  2. 自动编译CoffeeScript和指南针 - 我们的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是一个关于缩小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

你最好使用像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