如何使用gulp从不同的项目制作不同的文件夹？

Question

我有这样的结构：

app: 
---Project A 
--subfolder 
    -index.html 
---Project B 
--subfolder 
    -index.html 
---Project C 
--subfolder 
    -index.html 
--Styles 
--Scripts 
dist: As a result I want 
--Project A 
--subfolder 
    -index.html 
--Project B 
--subfolder 
-index.html 
--Project C 
--subfolder 
-index.html 
--Styles 
--Scripts 

这是我到目前为止的代码：

gulp.task('html',() => { 
    return gulp.src([ 
     'app/index.html', 
     'app/nl/**/index.html', //gets only one site 
     'app/com/**/index.html', //gets only one site 
     '!app/landing/styles/**/*.html', 
     '!app/bower_components/**/*.html' 
    ]) 
    .pipe($.useref({ searchPath: '{.tmp,app}' })) 
    // Remove any unused CSS 
    .pipe($.if('*.css', $.uncss({ 
     html: [ 'app/index.html' ], 
     // CSS Selectors for UnCSS to ignore 
     ignore: [] 
    }))) 
    // Concatenate and minify styles 
    // In case you are still using useref build blocks 
    .pipe($.if('*.css', $.cssnano())) 
    // Minify any HTML 
    .pipe($.if('*.html', $.minifyHtml())) 
    .pipe($.if('*.html', $.minifyInline({ 
     js: { output: { comments: false } }, 
     jsSelector: 'script[type!="text/x-handlebars-template"]', 
     css: { keepSpecialComments: 1 }, 
     cssSelector: 'style[data-do-not-minify!="true"]' 
    }))) 
    // Output files 
    .pipe($.if('*.html', $.size({ title: 'html', showFiles: true }))) 
    .pipe(gulp.dest('dist')); 
}); 

我只能得到子文件夹和index.html的。然而，当我能够得到我需要的，我得到的HTML里面的脚本冲突，这都

Answer 1

该解决方案可以通过一个函数来gulp.dest的gulp.file内的所有文件夹和脚本以便告诉他在哪个文件夹中需要写入文件。试试看：

gulp.task('html',() => { 
    return gulp.src([ 
     'app/index.html', 
     'app/nl/**/index.html', //gets only one site 
     'app/com/**/index.html', //gets only one site 
     '!app/landing/styles/**/*.html', 
     '!app/bower_components/**/*.html' 
    ]) 
    .pipe($.useref({ searchPath: '{.tmp,app}' })) 
    // Remove any unused CSS 
    .pipe($.if('*.css', $.uncss({ 
     html: [ 'app/index.html' ], 
     // CSS Selectors for UnCSS to ignore 
     ignore: [] 
    }))) 
    // Concatenate and minify styles 
    // In case you are still using useref build blocks 
    .pipe($.if('*.css', $.cssnano())) 
    // Minify any HTML 
    .pipe($.if('*.html', $.minifyHtml())) 
    .pipe($.if('*.html', $.minifyInline({ 
     js: { output: { comments: false } }, 
     jsSelector: 'script[type!="text/x-handlebars-template"]', 
     css: { keepSpecialComments: 1 }, 
     cssSelector: 'style[data-do-not-minify!="true"]' 
    }))) 
    // Output files 
    .pipe($.if('*.html', $.size({ title: 'html', showFiles: true }))) 
    .pipe(gulp.dest((file) => { 
     //You can see which file is treated here. 
     //Then you return a String with the destination of the file. 
    })); 
}); 

这不是一个完整的答案，但我认为至少可以给你一个追踪。