部署 minfied javascript 文件并调试

Question

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

我当然需要在运行时调试 javascript 我的开发，但是当我去部署时我需要缩小。这里的最佳做法是什么？在我将代码移至生产机器后，这真的是用我的 all.min.js 文件替换脚本标签的手动过程吗？我是否也要缩小所有 css 和 html？我正在使用 gulp 进行缩小...

感谢您的帮助....

Answer 1

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

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.

部署 minfied javascript 文件并调试

Deploy minfied javascript files and debug

javascript

minify

angularjs

gulp

gulp-uglify