Javascript 在 Node 中连接和缩小 JS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6539837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Concat and minify JS files in Node
提问by TIMEX
Is there any module in NodeJS to concatenate and minify JavaScript files?
NodeJS 中是否有任何模块可以连接和缩小 JavaScript 文件？
采纳答案by Edward M Smith
If you're using Connect, then I've had good luck with Connect-Assetmanager
如果您正在使用 Connect，那么我对Connect-Assetmanager祝您好运
回答by Diogo Cardoso
I recommend using UglifyJSwhich is a JavaScript parser / mangler / compressor / beautifier library for NodeJS.
我推荐使用UglifyJS，它是 NodeJS 的 JavaScript 解析器/管理器/压缩器/美化器库。
If you are interested in automation tools that do more than simply concatenate and minify files, there are the following solutions:
如果您对不仅仅是连接和缩小文件的自动化工具感兴趣，有以下解决方案：
GruntJSis a task-based command line build tool for JavaScript projects. The current version has the following built-in tasks:
GruntJS是用于 JavaScript 项目的基于任务的命令行构建工具。当前版本具有以下内置任务：
Besides this tasks there's a lot of pluginsavailable.
除了这个任务，还有很多插件可用。
Gulpis a toolkit that will help you automate painful or time-consuming tasks in your development workflow. For web development (if that's your thing) it can help you by doing CSS preprocessing, JS transpiling, minification, live reloading, and much more. Integrations are built into all major IDEs and people are loving gulp across PHP, .NET, Node.js, Java, and more. With over 1700 plugins (and plenty you can do without plugins), gulp let's you quit messing with build systems and get back to work.
Yeomanis a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.
- Lightning-fast scaffolding - Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.
- Automatically compile CoffeeScript & Compass - Our LiveReloadwatch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.
- Automatically lint your scripts - All your scripts are automatically run against jshintto ensure they're following language best-practices.
- Built-in preview server - No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.
- Awesome Image Optimization - I optimize all your images using OptiPNGand JPEGTran so your users can spend less time downloading assets and more time using your app.
- AppCache manifest generation - I generate your application cache manifests for you. Just build a project and boom. You'll get it for free.
- Killer build process - Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScriptand Compassfiles, generate you an application cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have to.
- Integrated package management - Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser.
- Support for ES6 module syntax - Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers.
- PhantomJS Unit Testing - Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.
Gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于 web 开发（如果这是你的事），它可以通过做 CSS 预处理、JS 转译、缩小、实时重新加载等等来帮助你。集成内置于所有主要 IDE 中，人们喜欢跨 PHP、.NET、Node.js、Java 等。拥有超过 1700 个插件（没有插件你也可以做很多），gulp 让你不再搞乱构建系统并重新开始工作。
Yeoman是一套强大且固执己见的工具、库和工作流，可帮助开发人员快速构建美观、引人注目的 Web 应用程序。
- 闪电般快速的脚手架 - 使用可自定义的模板（例如HTML5 Boilerplate、Twitter Bootstrap）、AMD（通过RequireJS）等轻松搭建新项目。
- 自动编译 CoffeeScript 和 Compass - 我们的LiveReload监视过程会在发生更改时自动编译源文件并刷新您的浏览器，因此您不必这样做。
- 自动对您的脚本进行 lint - 您的所有脚本都会针对jshint自动运行，以确保它们遵循语言最佳实践。
- 内置预览服务器 - 不再需要启动您自己的 HTTP 服务器。我的内置一个可以只用一个命令来触发。
- 令人敬畏的图像优化 - 我使用OptiPNG和 JPEGTran优化您的所有图像，以便您的用户可以花更少的时间下载资产，而将更多的时间花在使用您的应用程序上。
- AppCache 清单生成 - 我为您生成应用程序缓存清单。只需建立一个项目和繁荣。你会免费得到它。
- 杀手级构建过程 - 您不仅可以获得缩小和串联；我还会优化您的所有图像文件、HTML，编译您的CoffeeScript和Compass文件，为您生成一个应用程序缓存清单，如果您使用的是 AMD，我们将通过 r.js 传递这些模块，因此您不必这样做。
- 集成包管理 - 需要依赖？只需一个按键即可。我允许您通过命令行（例如 yeoman search jquery）轻松搜索新包，安装它们并保持更新，而无需打开浏览器。
- 支持 ES6 模块语法 - 尝试使用最新的 ECMAScript 6 模块语法编写模块。这是一项实验性功能，可转译回 ES5，因此您可以在所有现代浏览器中使用该代码。
- PhantomJS 单元测试 - 通过PhantomJS在无头 WebKit 中轻松运行单元测试。当您创建新应用程序时，我还会为您的应用程序提供一些测试脚手架。
回答by Joel Mueller
UglifyJSis a Node module that is all about minifying javascript. I don't think it also joins files, but there might be an option I missed.
UglifyJS是一个 Node 模块，用于缩小 javascript。我不认为它也加入文件，但我可能错过了一个选项。
Edit:With UglifyJS 2, it has built in concatenation as well.
编辑：使用UglifyJS 2，它也内置了连接。
If you want to do this inline in your node app it's really easy. This allows you to dynamically generate your minified/concatenated js script at runtime without using the grunt or yeoman way.
如果您想在您的节点应用程序中内联执行此操作，这真的很容易。这允许您在运行时动态生成缩小/连接的 js 脚本，而无需使用 grunt 或 yeoman 方式。
npm install uglify-js
and in your module:
并在您的模块中：
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');
}
});
回答by Jeflopo
You'll be better using something like gulp / webpack to concat/organize/bundle your assets.
你会更好地使用像 gulp/webpack 这样的东西来连接/组织/捆绑你的资产。
In order to join js file you can do as its done in twitter bootstrap makefile
为了加入 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
This is just a concatenation of files with an output to a js file
这只是一个输出到 js 文件的文件的串联
Then you can install uglify-js to minify js:
然后你可以安装 uglify-js 来缩小 js：
npm -g install uglify-js
And perform this command with your path/file.js ofc:
并使用您的 path/file.js ofc 执行此命令：
uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js
As mentioned in comments since uglifyjs 2 you could also do:
正如 uglifyjs 2 以来的评论中提到的，您还可以执行以下操作：
uglifyjs --compress --mangle -- input.js
回答by Trevor Burnham
If you like the Rails 3.1 asset pipeline approach, you should try my connect-assetslibrary.
如果您喜欢 Rails 3.1 资产管道方法，您应该尝试我的连接资产库。
回答by Trevor
Try these two plugins for Grunt
试试这两个 Grunt 插件
https://www.npmjs.org/package/grunt-contrib-concat
https://www.npmjs.org/package/grunt-contrib-concat
https://www.npmjs.org/package/grunt-contrib-uglify
https://www.npmjs.org/package/grunt-contrib-uglify
You can install everything you need like so:
您可以像这样安装所需的一切：
npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify
Then create your grunt file, like so:
然后创建您的 grunt 文件，如下所示：
Gruntfile.js
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']);
}
Finally, type gruntin the terminal and Grunt will start watching your JavaScript files for changes and automatically concat and uglify them (whenever you save a change to your js files in ../src/
最后，grunt在终端中输入，Grunt 将开始监视您的 JavaScript 文件的更改并自动合并和丑化它们（每当您将更改保存到 ../src/ 中的 js 文件时
回答by Stephen Chung
I'd definitely suggest the Closure Compiler's simple mode.
我肯定会建议 Closure Compiler 的简单模式。
回答by johnmdonahue
回答by CPHPython
If you already have uglify-js, your code uses some of the latest ES6 features (ECMAScript 2015)and it just gave you back parse errors on the first run, then install uglify-es:
如果你已经有了uglify-js，你的代码使用了一些最新的ES6 特性（ECMAScript 2015），它只是在第一次运行时给你返回解析错误，然后安装uglify- es：
npm install uglify-es -g
Or:
或者：
npm install mishoo/UglifyJS2#harmony
The explanation is in uglify-js-es6 package:
说明在uglify-js-es6 包中：
This is a temporary package containing the latest release of the 'harmony' branchof uglifyjs (UglifyJS2).
You can still run it normally with the uglifyjscommand. A compress and mangle example:
您仍然可以使用该uglifyjs命令正常运行它。压缩和处理示例：
uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js
Which will produce a single file with all the JS files of a folder. The double dash (--) just prevents input files being used as option arguments.
这将生成一个包含文件夹中所有 JS 文件的单个文件。双破折号 ( --) 只是防止将输入文件用作选项参数。
