前端多个js/css文件压缩合并到一个min.js min.css文件给外部使用

方式1：使用Gulp
一、基于Node.js的自动构建工具Gulp，核心是：

• 任务（Task）：定义要执行的操作（如压缩 CSS、合并 JS）
• 流（Stream）：Gulp 通过流处理文件（读取→处理→输出），效率更高
• 插件：通过插件实现具体功能（如 gulp-minify-css 压缩 CSS、gulp-uglify 压缩 JS）

二、环境准备
1、安装Node.js，Gulp 依赖 Node.js，先安装 Node.js
2、安装 Gulp（全局 + 项目本地）

// （1）全局安装后，才能在终端使用gulp命令
npm install --global gulp-cli
// 使用命令验证是否安装gulp  显示 CLI 版本 + 本地版本（项目内安装后才会显示本地版本）
gulp -v

// （2）项目内安装Gulp核心包
npm install --save-dev gulp

//（3）安装项目依赖插件 package.json 已声明所有需要的插件，执行以下命令一键安装
npm install

3、安装好Gulp后开始使用，Gulp 的核心配置文件，以下是关键部分拆解：
(1).引入依赖

var gulp = require("gulp"); // 核心包
minifycss = require('gulp-minify-css'), // CSS 压缩
concat = require('gulp-concat'), // 文件合并
uglify = require('gulp-uglify'), // JS 压缩
rename = require('gulp-rename'), // 文件重命名
jshint = require('gulp-jshint'), // JS 语法检查
notify = require('gulp-notify'); // 操作完成提示

(2).定义任务函数

// eg:合并压缩css
function buildCss() {
    // 1. 读取文件：gulp.src(路径数组) → 匹配要处理的文件
    return gulp.src(['sdk/css/sdk.css', 'sdk/css/loading.css', 'sdk/css/float.css', 'sdk/css/alert.css'])
        .pipe(minifycss()) // 2. 压缩 CSS
        .pipe(concat('xxsdk.min.css')) // 3. 合并为一个文件
        .pipe(gulp.dest('sdk/build')); // 4. 输出到指定目录
}

// eg：合并压缩js
function buildH5Js() {
    return gulp.src(['sdk/zepto.min.js','sdk/config.js','sdk/DuoJiaoSDK.js', 'sdk/sdkFloatManage.js',
        'sdk/sdkLoginViewManage.js', 'sdk/sdkManage.js', 'middle/sdk.js'])
        .pipe(uglify()) // 压缩 JS（注意：uglify 不支持 ES6+，若有 ES6 需用 gulp-uglify-es）
        .pipe(concat('xxsdk.min.js')) // 合并为 xxsdk.min.js
        .pipe(gulp.dest('sdk/build')); // 输出到 sdk/build
}

(3).注册

// 默认任务，通过终端输入gulp命令触发
gulp.task('default', done => {
    buildCss(); // 执行 CSS 打包
    buildH5Js(); // 执行 H5 JS 打包
});

// 或者注册独立任务，执行打包压缩对应内容 eg：打包压缩css压缩命令gulp buildCss
// 注册单独的 CSS 打包任务
gulp.task('buildCss', buildCss);
// 注册单独的 H5 JS 打包任务
gulp.task('buildH5Js', buildH5Js);

4、执行 Gulp 任务

// 执行默认任务（打包所有)会依次执行 buildCss、buildH5Js，生成打包后的文件到对应目录。
gulp
//  执行单独任务
gulp buildCss

4、关于gulp压缩指定任务内容时候对顺序有要求
当有a.js、b.js、c.js三个js文件，a依赖b和c
(1)当三个js使用gulp压缩打包成一个js时候，打包的这个js外部使用无需引用b和c
(2)必须要保证a在b和c的前面，因为a依赖b和c

方式2：使用Rollup打包，没实操暂记录
Rollup/Gulp 对 JS 的处理能力对比

image.png

注意：两种方式本身都不提供加密功能，仅能做代码压缩 / 混淆（属于 “弱保护”，而非真正的加密），如果要加密js防止别人逆向可使用加密插件