如何使用Uglify.js为Express.js中的每个视图连接JavaScript

所以，我有一个build立在express.js上的网站，我希望在我的构build过程中使用uglify.js来pipe理一些javascript。

我的典型视图如下所示：

extend layout block head script(src="/js/polyfills/html5shiv.js") block body header nav... main section form... footer nav... script(src="/js/polyfills/arrayGenerics.js") script(src="/js/polyfills/placeholder.js") script(src="/js/formSubmitter.js") 

理想情况下，顶部的JavaScript文件将被缩小，底部的JavaScript文件将被连接成一个并缩小。

我知道如何在命令行上做到这一点，我可以使用npm脚本来“自动化”一点，但我该如何处理编辑这个视图文件？ 还有我所有的视图文件？ 那么，如何让事情恢复到原来的状态，才能继续发展呢？

我习惯了手写笔和它处理与CSS类似的问题，最终生成一个漂亮的.css文件，并在飞行中很好地工作，但JavaScript似乎有点不同，我不太清楚如何处理它。

Answer 1

您可以将uglify设置为将所有内容连接成单个文件或分开的文件，使用gulp。 理想情况下，如果您知道JS文件1,2和3位于页面顶部，底部是4，则可以将它设置为将1,2和3连接在一起，并将文件4缩小。

Gulp文件看起来像这样：

 var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); // Process scripts and concatenate them into one output file gulp.task('topScripts', ['clean'], function() { gulp.src(paths.scripts, {cwd: bases.app}) .pipe(uglify()) .pipe(concat('top.js')) .pipe(gulp.dest(bases.dist + 'js/')); }); gulp.task('botScripts', ['clean'], function() { gulp.src(paths.scripts, {cwd: bases.app}) .pipe(uglify()) .pipe(concat('bot.js')) .pipe(gulp.dest(bases.dist + 'js/')); }); 

您以前定义过顶部和底部脚本的位置。