服务端渲染express的模版时，根据不同的服务端变量去引用各自的js文件，如何对这些js文件进行打包？
项目中，不同的页面可能会引用不同的js文件，结合服务端的变量，我把引用js的逻辑写成了express-handlebars模版。
现在想将js文件打包，使得每一个页面的多个js引用合并，处理这种场景，想问问大家有什么更好的方式？
5 回复
只是合并的话，可以用 grunt 。grunt-contrib-uglify 可以同时 minified 和 concat 。 但是不同页面也会有共用的吧。 也可以看下 requirejs
推荐使用gulp 这有一个很简单的例子 ， 你一看就懂了
// 引入 gulpvar gulp = require('gulp');
// 引入组件var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并，压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
大家说的方案，我都去尝试了下，可能是我一开始把问题想复杂了，我最初想实现的是一个模版中，根据服务端的变量，添加引用不同的脚本路径，由于模版要在服务端渲染，所以一个页面需要打包哪些脚本，得模版渲染完了才知道，所以想在这个时候去实现一个带有缓存的打包机制。
gulp，loader可能适用于当引用的脚本，不依赖于服务端的变量，不需要在模版渲染后才知道哪些脚本需要打包这种情况。所以我简化了自己目前模版的逻辑，不根据业务去很细化的区分不同的脚本引用路径，先把gulp这个工具用了起来，所有页面都是相同的脚本引用。
至于require.js，我现在脚本之间的依赖结构基本没有，所以暂时没去用它解决依赖。
