如何缩小我的个人jquery前端微框架

Question

我已经用有用的实用程序制作了我的个人jQuery微框架。它的目录结构如下：

/jspocket
- jspocket.js
/scripts
- include.js
- navigation.js
- slider.js
- popups.js
...

因此，它被导入到 html 中，如下所示：

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jspocket/jspocket.js"></script>

jspocket.js是用于将所有.js文件从"/script"目录导入 html 文件的代码：

$.getScript(jspocket_dir + "/scripts/navigation.js");
$.getScript(jspocket_dir + "/scripts/popups.js");
$.getScript(jspocket_dir + "/scripts/slider.js");
$.getScript(jspocket_dir + "/scripts/include.js");
...

---

现在我想创建我的框架的缩小版本，以便只有一个文件jspocket.min.js。但问题是命令如下：

$.getScript(jspocket_dir + "/scripts/navigation.js");

行不通，只是因为缩小版本中不存在scripts/navigation.js，它应该全部在一个文件中。

所以问题是如何将框架缩小到一个文件中(而不是手动将所有代码复制到一个文件中(？我应该更改导入脚本的方式吗？JS的新导入/导出功能是否以某种方式解决了它？这个问题一般如何解决？我正在使用node.js和npm，所以也许有一个很好的软件包？

Answer 1

您需要使用构建系统将文件缩小为一个文件，但jspocket.js排除在进程之外。

有许多构建系统，如GruntJs，Webpack或Gulp

以下是在 Gulp 中执行此操作的方法

// the plugins
var gulp = require('gulp')
var uglify = require("gulp-uglify");
var concat = require('gulp-concat');
// task
gulp.task('minify-js', function () {
gulp.src([
./jspocket/scripts/navigation.js,
// the rest of your files in your order
]) 
.pipe(concat('jspocket.min.js'))  
.pipe(uglify())
.pipe(gulp.dest('dist'));
});

然后运行gulp minify-js