javascript - Yeoman の出力のすべてのスクリプト、画像をカスタム フォルダーにグループ化する方法

Question

Yeoman ワークフローを Python バックエンドと統合したいのですが、nginx キャッシュを使用するために、すべての最小化/復帰スクリプト、css、画像を「静的」フォルダーに入れていました。

ここで、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、画像を '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を確認してください。

もう 1 つの方法は、静的フォルダーの代わりにこれら 4 つのフォルダーを使用するようにすべての nginx 構成を変更することです。ありがとう。