服务端渲染express的模版时,根据不同的服务端变量去引用各自的js文件,如何对这些js文件进行打包?
项目中,不同的页面可能会引用不同的js文件,结合服务端的变量,我把引用js的逻辑写成了express-handlebars
模版。
现在想将js文件打包,使得每一个页面的多个js引用合并,处理这种场景,想问问大家有什么更好的方式?
5 回复
推荐使用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');
});
});