javascript - 如何将 Yeoman 的输出的所有脚本、图像分组到自定义文件夹

Question

我想将 Yeoman 工作流与我的 python 后端集成，我曾经将所有最小化/还原脚本、css、图像放入“静态”文件夹中以供 nginx 缓存使用。

现在我要做的是更改 Yeoman 的输出结构，将“bower_component”、“images”、“scripts”、“styles”放入“dist/static”文件夹，并将其他 html 或 tpl 保存在“dist”文件夹中。

我尝试更改 Grunt 配置，但失败了，这是我的更改：

1. 像我想要的那样更改“app”文件夹中的文件结构，更新 index.html 和 requirejs。
2. 根据“app”文件夹更新 Gruntfiles.js 中的文件结构。

3. 根据需要更改 Gruntfiles.js 中所有相关的“yeoman.dist”，将脚本、css、图像放入“静态”文件夹。

   useminPrepare: {
       html: '<%= yeoman.app %>/index.html',
       options: {
           dest: '<%= yeoman.dist %>/static'
       }
   },
   
   usemin: {
       html: ['<%= yeoman.dist %>/{,*/}*.html'],
       css: ['<%= yeoman.dist %>/static/styles/{,*/}*.css'],
       options: {
           dirs: ['<%= yeoman.dist %>/static']
       }
   },
   
   imagemin: {
       dist: {
           files: [{
               expand: true,
               cwd: '<%= yeoman.app %>/static/images',
               src: '{,*/}*.{png,jpg,jpeg}',
               dest: '<%= yeoman.dist %>/static/images'
           }]
       }
   },
   
   cssmin: {
       dist: {
           files: {
               '<%= yeoman.dist %>/static/styles/main.css': [
                   '.tmp/styles/{,*/}*.css',
                   '<%= yeoman.app %>/static/styles/{,*/}*.css'
               ]
           }
       }
   },
   
   htmlmin: {
       dist: {
           options: {
               /*removeCommentsFromCDATA: true,
               // https://github.com/yeoman/grunt-usemin/issues/44
               //collapseWhitespace: true,
               collapseBooleanAttributes: true,
               removeAttributeQuotes: true,
               removeRedundantAttributes: true,
               useShortDoctype: true,
               removeEmptyAttributes: true,
               removeOptionalTags: true*/
           },
           files: [{
               expand: true,
               cwd: '<%= yeoman.app %>',
               src: '*.html',
               dest: '<%= yeoman.dist %>'
           }]
       }
   },
   
   copy: {
       dist: {
           files: [{
               expand: true,
               dot: true,
               cwd: '<%= yeoman.app %>',
               dest: '<%= yeoman.dist %>',
               src: [
                   '*.{ico,txt}',
                   '.htaccess',
                   'static/images/{,*/}*.{webp,gif}'
               ]
           }]
       }
   },
   
   bower: {
       all: {
           rjsConfig: '<%= yeoman.app %>/static/scripts/main.js'
       }
   },
   
   jst: {
       options: {
           amd: true
       },
       compile: {
           files: {
               '.tmp/scripts/templates.js': ['<%= yeoman.app  %>/static/scripts/templates/*.ejs']
           }
       }
   },
   
   rev: {
       dist: {
           files: {
               src: [
                   '<%= yeoman.dist %>/static/scripts/{,*/}*.js',
                   '<%= yeoman.dist %>/static/styles/{,*/}*.css',
                   '<%= yeoman.dist %>/static/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
                   '<%= yeoman.dist %>/static/styles/fonts/*'
               ]
           }
       }
   }
   

   });

但是输出不能更新 HTML 以引用我们的 concat/min/revved 脚本文件，并且输出“bower_components”文件夹的路径有问题。任何想看源代码的人，请查看Github。

另一种方法是我将所有 nginx 配置更改为使用这四个文件夹而不是静态文件夹。有人可以告诉我什么最佳实践符合我的要求吗？谢谢。

Answer 1

通过两个步骤解决了这个问题：

1. 将 'useminPrepare 任务的 'dest' 更改为 '<%= yeoman.dist %>'

2. 将 app/index.html 中的 'build:js' 更改为 'static/scripts/...' 以告诉 'usemin' 将 js 复制到 'static 文件夹' 的位置

所以现在我可以将所有 min/ugly/reversion 脚本、图像、样式、bower_components 放到 'dest/static' 文件夹中以供 nginx 缓存使用。检查Github上的项目更新。

但是要自动生成这种项目，最好的方法可能是自定义 Yeoman 生成器，而不是更改generator_backbone的输出，我稍后会尝试。