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

How to group Yeoman`s output`s all scripts,images to custom folder

本文关键字:图像 自定义 文件夹 脚本 Yeoman 输出      更新时间:2023-09-26

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

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

我试图更改Grunt的配置,但失败了,以下是我的更改:

  1. 更改"应用程序"文件夹中的文件结构,如我所需,更新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配置更改为使用这四个文件夹,而不是静态文件夹。有人能告诉我什么是符合我要求的最佳实践吗?谢谢

通过两个步骤修复了这个问题:

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

  2. 将app/index.html中的"build:js"更改为"static/scripts/…"告诉"usemin"在哪里将js复制到"静态文件夹"

因此,现在我可以将所有min/unight/reverse脚本、图像、样式、bower_components放在"dest/static"文件夹中,以供nginx缓存使用。查看Github上的项目更新。

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