Question

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

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

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

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

根据需要更改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

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

将'useminPrepare任务'dest'更改为'＆lt;％= yeoman.dist％＆gt;'
将app / index.html中的'build：js'更改为'static / scripts / ...'告诉'usemin'将js复制到'static folder'的位置

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

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

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

1 个答案: