Question

我的index.html分割了js文件，如下所示：

<head>
  ....
  <!-- build:js js/app1.min.js -->
  <!-- js from lib -->
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/angular-route/angular-route.min.js"></script>

  <!-- js of this app -->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>

  <!-- external js -->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <!-- endbuild -->
  ....
</head>

.....
<body>
...
  <!-- build:js js/app2.min.js -->

  <!-- js from lib -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <!-- angular-animate provides search functionality -->

  <!-- js of this app -->      
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

  <!-- endbuild -->
  ....
</body>

如您所见，我尝试使用两组js文件。分裂的原因是表现。在这种情况下如何使用usemin。我尝试了以下内容：

'useminPrepare': {
  'html': 'app/index.html'
},

'usemin': {
  'html': ['dist/index.html']
},

但是，没有创建文件夹/文件。但是在index.html中，这两个部分被app1.min.js和app2.min.js

正确替换

此外，我不明白所有示例都使用concat和uglify结合使用usemin。 index.html中的文件已经是* .min.js例如。 bower_components文件夹中包含哪些文件，会发生什么？

Answer 1

除非您已经对grunt进行了大量投资，否则请gulp查看。

以下是gulpfile.js的摘录。 gulp.src()函数获取文件列表，然后通过转换进行管道处理，以文件列表结束，这些文件将gulp.dest()写入磁盘。

这就是前两个代码块src，transform（minify，concat等），并编写js和css。

最后一段代码src（）是index.html，从前两个块中注入文件名，并将index.html写入构建文件夹。我就gulp构建进行咨询。

以下是您在gulp中的表现：

  // Vendor files are pre-minified.  Get right versions.
  // JS.  Concat, and add revision if necessary
  var srcJs = config.minify ? config.dashboard.vendorJsMin : config.dashboard.vendorJs;
  var destJs = 'vendor' + (config.minify?'.min':'') + '.js';
  var vendorJs = gulp.src(srcJs)
  .pipe(plugins.if(config.concat, plugins.concat(destJs)))
  .pipe(plugins.if(config.hash, plugins.hash()))
  .pipe(gulp.dest(config.dashboard.dest + '/js'))

  // Vendor files are pre-minified.  Get right versions.
  // CSS.  Concat, and add revision if necessary
  var srcCss = config.minify ? config.dashboard.vendorCssMin : config.dashboard.vendorCss;
  var destCss = 'vendor' + (config.minify?'.min':'') + '.css';
  var vendorCss = gulp.src(srcCss)
  .pipe(plugins.if(config.concat, plugins.concat(destCss)))
  .pipe(plugins.if(config.hash, plugins.hash()))
  .pipe(gulp.dest(config.dashboard.dest + '/css'))

  // Inject all these files into index.html
  return gulp.src(config.dashboard.index)
  .pipe(plugins.plumber())
  .pipe(plugins.inject(vendorJs, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
  .pipe(plugins.inject(vendorCss, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
  .pipe(plugins.inject(appJs, _.merge({name: 'app'}, config.dashboard.injectOptions)))
  .pipe(plugins.inject(appCss, _.merge({name: 'app'}, config.dashboard.injectOptions)))
  .pipe(plugins.inject(templates, _.merge({name: 'templates'}, config.dashboard.injectOptions)))
  .pipe(plugins.replace('REPLACE_NODE_ENV', config.NODE_ENV))
  .pipe(gulp.dest(config.dashboard.dest))

这是一个更多的开发者。喜欢构建系统而不是咕噜声。 Grunt更多的是＆＃39; ops＆＃39;喜欢。无论哪种效果最好，都可以使用！

如何使用grunt usemin从index.html创建多个js文件

1 个答案: