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

Question

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

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

但有些事情我不明白...

我将 minify/uglify 这些文件，然后我将为这些 "production" 文件创建一个特定的文件夹。好的

然后：

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

Answer 1

所以我可以用 gulp 代替 g运行t 向你解释。

我应该如何在 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 -->

现在如果看到上面的 css 文件被编译成 vendor.css 而你运行 gulp 脚本。现在，在 gulp 脚本中，您可以提供丑化和缩小的选项。

同样你也可以放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" />

我应该如何从开发切换到生产？

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

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

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

您的网站结构可以是：-

应用
- 脚本
- 样式
- 字体
- index.html
bower.json
gulpfile.js

Answer 2

另一种方法是使用gulp-useref插件，在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 文件中适当引用

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

How to handle all the minification / uglify process

javascript

production

uglifyjs

angularjs

gruntjs