所以,我有一个基于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 似乎有点不同,我不太确定如何处理它。
最佳答案
您可以使用 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/'));
});
您之前定义了顶部和底部脚本的位置。
关于javascript - 如何使用 Uglify.js 为 Express.js 中的每个 View 连接 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30430135/