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

Question

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

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

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

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

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

   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 任务”的“目标”更改为“<%= 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 `的输出，我稍后会尝试。