如何处理所有的缩小/丑化过程

Question

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

我找到了不同的方式来丑化我的文件，例如 grunt。

但有些东西我不明白......

我将缩小/丑化这些文件，然后我将为这些“生产”文件创建一个特定文件夹。 好的

然后：

1. 我应该如何在我的index.html 中使用它们？
2. 我应该如何从 dev 切换到 prod？
3. 我的网站文件夹的结构应该是什么？我还应该包含未丑化的文件吗？

Answer 1

所以我可以用 gulp 代替 grunt 向你解释。

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

您可以将 JS 和 CSS 文件放入您的 html 中。在 html 中，我们可以指定 cmets 说明哪些文件需要与使用 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 -->

现在，如果您在运行 gulp 脚本时看到上述 css 文件被编译成 vendor.css。现在在 gulp 脚本中，您可以提供 uglification 和 minification 的选项。

同样你也可以放 js 文件。现在这就是丑化和缩小的发生方式。

gulp.src('app/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.minifyCss({
      compatibility: '*'
    })))

如果你现在 uglify/minify 你 index.html 有以下内容：-

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

我应该如何从 dev 切换到 prod？

您可以保留一个嵌套的 JSON 文件并为 dev、prod 和 local 创建单独的元素，并在此处保留所需的设置，并在编译项目时在 gulp 中使用它们。

{
  "dev": {
   //required keys
   },
  "prod" :{
  //required keys
}

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

您的网站结构可以是：-

• 应用程序
  • 脚本
  • 样式
  • 字体
  • index.html
• bower.json
• gulpfile.js

Answer 2

另一种方法是使用gulp-useref插件，将cmets放入html文件中，标记所有js文件并命名生成的bundle

在 html 文件中

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

在 gulpfile.js 中

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

这将生成一个缩小的 js 文件 bundle.js，并在 html 文件中正确引用