javascript - 如何使用 Uglify.js 为 Express.js 中的每个 View 连接 JavaScript

Question

所以，我有一个基于express.js 构建的网站，我希望使用uglify.js 来管理我的构建过程中的一些javascript。

我的典型 View 如下所示:

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 脚本来“自动化”一点，但如何处理编辑此 View 文件？我的所有其他 View 文件呢？那么，我怎样才能让事情恢复原样以便我可以继续开发呢？

我习惯了 stylus 以及它处理 css 类似问题的方式，最终生成一个漂亮的 .css 文件并且可以很好地运行，但是 javascript 似乎有点不同，我不太确定如何处理它。

Answer 1

您可以使用 gulp 将 uglify 设置为将所有内容连接到单个文件或单独的文件中。理想情况下，如果您知道 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/'));
});

您之前定义了顶部和底部脚本的位置。