部署最小化的 JavaScript 文件并进行调试

Question

所以我完成了一个新的 angular 应用程序的构建，我想将其部署到生产环境中......当然，我已经准备好了我所有的角度代码，以便可以将其缩小，所以我被覆盖在那里！！但是有些我不明白...我对我的应用程序有非常好的代码分离和完整的单元测试......因此，当然，我的主页上有很多脚本标签。

当然，我需要在

开发过程中在运行时调试我的 JavaScript，但是当我开始部署时，我需要缩小。这里的最佳实践是什么？这实际上是在将代码移动到生产计算机后用我的 all.min.js 文件替换脚本标记的手动过程吗？我也缩小了所有的 css 和 html 吗？我正在用大口大口地缩小...

感谢您的帮助...

Answer 1

在没有服务器端模板（如Razor或Thymeleaf）的情况下，我建议使用gulp-preprocess，gulp-processhtml或gulp-html-replace。

Answer 2

使用 gulp 连接开发和生产中的文件。您可能希望使用 gulp-sourcemaps 来调试客户端 javascript，就好像它们是单独的文件一样。

下面是一个示例gulpfile.js

gulp.task('script', function(){
  gulp.src('./app/**/*.js')
  .pipe(sourcemaps.init())
  .pipe(concat('application.js'))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./build'))
})
gulp.task('script:prod', function(){
  gulp.src('./app/**/*.js')
  .pipe(concat('application.js'))
  .pipe(ugilfy())
  .pipe(gulp.dest('./build'))
})

然后在您的视图中，只需将其指向构建文件即可。

<script src="/build/application.js"></script>

部署时，请运行 gulp script:prod 。在开发中，运行gulp script 。