Question

我想知道是否有人可以帮助我。

我有一个项目，我为不同的网站创建多个html页面。这些站点中的每一个共享一个公共资产文件夹（fonts，css，js等）我的目录布局如下：

  |-- project
  |  |--assets
  |  |  |—-css
  |  |  |—-images
  |  |  |—-fonts
  |  |  |—-js
  |  |--site-1
  |  |  |—-index.html
  |  |--site-2
  |  |  |—-index.html
  |  |--site-3
  |  |  |—-index.html

我想要实现的目标如下：

•A＆＃39; dist＆＃39;包含以下内容的文件夹：

  |-- dist
  |  |--site-1
  |  |  |—-index.html
  |  |  |—-style.min.css
  |  |  |—-image1.jpg
  |  |  |—-image2.jpg
  |  |  |—-image3.jpg etc...
  |  |  |—-scripts.min.js
  |  |  |—-font1.otf
  |  |  |—-font2.otf etc...
  |  |--site-2
  |  |  |—-index.html
  |  |  |—-style.min.css
  |  |  |—-image1.jpg
  |  |  |—-image2.jpg
  |  |  |—-image3.jpg etc...
  |  |  |—-scripts.min.js
  |  |  |—-font1.otf
  |  |  |—-font2.otf etc...
  |  |--site-3
  |  |  |—-index.html
  |  |  |—-style.min.css
  |  |  |—-image1.jpg
  |  |  |—-image2.jpg
  |  |  |—-image3.jpg etc...
  |  |  |—-scripts.min.js
  |  |  |—-font1.otf
  |  |  |—-font2.otf etc...

只是为了解释所需的结果：

•每个网站都被展平了＃39;在目录中，以便所有资产，图像，js，css，字体与index.html文件处于同一级别。（需要第三方的要求）

•每个.html，.css＆amp;中的相应链接.js更新反映了上述内容。

•有时可能会有多于或少于3＆＃39; site＆＃39;文件夹 - 所以如果我可以循环使用它会很棒。通过并检测文件夹名称约定（??） - 如果有人比我聪明，知道如何使用grunt任务执行此操作，那就太好了。

我一直在尝试grunt-rebase任务来完成这项工作。这听起来像是我需要的东西，但是我真的在努力使文档变得有效，同时缺乏对繁琐任务的经验。

任何帮助都会很棒。如果您需要更多信息，请告诉我。

编辑 - 这是我的grunt.js文件 - 为清晰起见，我删除了不需要的任务和其他凹凸。

module.exports = function (grunt) {

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),


    copy: {
        main: {
            files: [
                {expand: true, cwd: 'project/', src: ['**/*'], dest: 'dist/', filter: 'isFile'}
            ]
        }
    },

    rebase: {
        scoped: {

            files: [{
                //css ref's
                expand: true,
                cwd: 'dist/assets/css/',
                src: '*.css',
                dest: 'dist/site-1/',
                reference: '../assets/images/',
                scopes: {
                    url: {
                        '../images/': '',
                        '../fonts/': ''
                    }
                }
            }, {
                //html ref's
                expand: true,
                cwd: 'dist/site-1/',
                src: '**/*.html',
                dest: 'dist/site-1/',
                reference: true,
                scopes: {
                    url: {
                        '../assets/images/': ''
                    },
                    img: {
                        '../assets/images/': ''
                    },
                    link: {
                        '../assets/css/': ''
                    },
                    script: {
                        '../assets/js/': ''
                    }
                }
            }, {
                //images
                expand: true,
                cwd: 'dist/assets/images/',
                src: '**/*',
                dest: 'dist/site-1/'
            }, {
                //fonts
                expand: true,
                cwd: 'dist/assets/fonts/',
                src: '**/*',
                dest: 'dist/site-1/'
            },
            {
                //js
                expand: true,
                cwd: 'dist/assets/js/',
                src: '*.js',
                dest: 'dist/site-1/'
            }]
        }
    }

});

//1 - make copy of entire prod directory to 'dist folder'
//2 - rebase task
//3 - TODO - delete dist/assets folder (not needed after rebase)

grunt.registerTask('Create Exported Project', [
    'copy',
    'rebase'
]);

};

上面的rebase任务有效....但只适用于我硬编码到＆＃39; dest＆＃39;每个范围的字段（＆＃39; site-1＆＃39;文件夹）。

我希望能够灵活地遍历所有符合条件的文件夹（可能是字符串 - ＆＃39; site - ＆＃39;）。

grunt-rebase - 复制到多个文件夹以及展平结构

0 个答案: