Question

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

我的典型观点如下：

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

您可以使用gulp将uglify设置为将所有内容连接到单个文件或单独的文件中。理想情况下，如果你知道你有JS文件1,2和＆amp;在页面顶部3，在底部4，您可以将其设置为连接1,2和＆amp; 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/'));
});

您之前已定义的顶部和底部脚本。

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

1 个答案: