咨询Boland模板JS/CSS压缩打包方法及前端打包教程

从你提供的目录结构来看，这个模板使用Gulp作为前端构建工具来处理JS/CSS的压缩打包，下面是具体操作步骤：

1. 环境准备 #

• 确保本地已安装Node.js（自带npm包管理工具），打开终端进入boland根目录
• 执行命令 npm install，自动安装package.json中声明的所有Gulp及压缩相关依赖

2. 执行打包压缩 #

终端在根目录下执行对应命令即可完成压缩：

• 单次打包压缩：执行 gulp build（若配置中无此任务，可查看package.json的scripts字段，或直接执行具体Gulp任务）
• 开发实时监听：执行 gulp watch 或直接 gulp（多数Gulp配置默认启动文件监听，修改SCSS/JS后自动重新压缩）

3. 手动补全Gulp配置（若原有配置缺失） #

如果打开gulpfile.js发现没有压缩相关任务，可以将以下代码补充到文件中：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

// 编译SCSS并压缩为min.css
gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('public/assets/css'));
});

// 合并JS并压缩为min.js
gulp.task('scripts', function() {
  return gulp.src(['js/theme.js', 'js/custom/**/*.js'])
    .pipe(concat('theme.js'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('public/assets/js'));
});

// 监听文件变化自动构建
gulp.task('watch', function() {
  gulp.watch('scss/**/*.scss', gulp.series('styles'));
  gulp.watch('js/**/*.js', gulp.series('scripts'));
});

// 默认任务：执行所有打包+监听
gulp.task('default', gulp.series('styles', 'scripts', 'watch'));

补全后需要安装对应依赖：

npm install gulp gulp-sass sass gulp-clean-css gulp-rename gulp-uglify gulp-concat --save-dev

再执行 gulp 即可启动自动压缩流程。

4. 验证结果 #

执行命令后，前往public/assets/css/目录查看是否生成styles.min.css、style-dark.min.css，public/assets/js/目录查看是否生成theme.min.js，出现对应文件即表示压缩打包成功。

内容的提问来源于stack exchange，提问作者rockets4all