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

How to use Uglify.js to concat JavaScript for each view in Express.js

本文关键字：js 视图 连接 JavaScript 何使用 Uglify Express      更新时间：2023-09-26

所以，我有一个建立在express.js的网站，我希望使用uglify.js来管理我的构建过程中的一些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似乎有点不同，我不太确定如何处理它。

您可以使用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/'));
});
相关文章：