Javascript 如何处理所有缩小/丑陋过程

我有一个AngularJS应用程序，我应该部署它，我发现最好缩小我的javascript文件以用于生产

我发现了不同的方法来丑化我的文件，比如grunt

但有件事我不明白

我将缩小/丑化这些文件，然后我将为这些“生产”文件设置一个特定文件夹。嗯

然后：

我应该如何在我的

index.html

中使用它们

我应该如何从dev切换到prod

我的网站文件夹的结构应该是什么？我是否仍应包含未被丑化的文件

---

所以我可以用大口大口地而不是咕噜地向你解释

我应该如何在index.html中使用它们？

您可以将JS和CSS文件放入html中。在html中，我们可以使用bower指定注释，说明哪些文件需要与目标文件一起编译

例如：-

<!-- build:css styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />
  <link rel="stylesheet" href="/bower_components/angular-ui-router-anim-in-out/css/anim-in-out.css" />
  <link rel="stylesheet" href="/bower_components/video.js/dist/video-js.css" />
  <link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
  <link rel="stylesheet" href="/bower_components/nvd3/build/nv.d3.css" />
  <!-- endbower -->
  <!-- endbuild -->

如果您现在使用uglify/minify，则index.html具有以下功能：-

  <link rel="stylesheet" href="/styles/vendors.css" />

我的网站文件夹的结构应该是什么？我是否仍应包含未显示的文件？

您的网站结构可以是：-

• 应用程序
  • 剧本
  • 风格
  • 字体
  • index.html
• bower.json
• gulpfile.js

---

另一种方法是使用gulp useref插件，在html文件中添加注释以标记所有js文件并命名生成的包

在html文件中

<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->

---

这将产生一个缩小的js文件

bundle.js

，在html文件中有适当的引用

index.html将自动从缩小的/uglified文件切换到普通文件？是的，取决于环境。如果你在本地运行，那么你所有的普通文件都会在那里，在生产中，如果特定的uglify/minify选项，你的文件会被编译、缩小并放在一个文件中。但是在index.html中如何处理引用呢？它如何知道何时引用单个文件或何时引用所有文件？我将以CSS为例来解释这一点。当您使用gulp进行丑化/缩小时，所有CSS文件都被编译成一个CSS文件。因此，从技术上讲，您的html现在只包含一个CSS文件。我会更新答案，让它更清楚。现在更清楚了，但我仍然坚持使用index.html。。。缩小/丑陋后，我无法返回所有参考？它更易于调试和开发

<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->

<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->

gulp.task('build', function(){
   gulp.src('app/*.html')
   .pipe(useref())
   .pipe(gulpIf('*.js', uglify()))
   .pipe(gulp.dest('build'));
});