如何使用 gulp 从不同的项目创建不同的文件夹？答案

【问题标题】：How can I make different folders from different projects with gulp?如何使用 gulp 从不同的项目创建不同的文件夹？
【发布时间】：2016-04-24 15:56:55
【问题描述】：

我有这个结构：

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 中的脚本和 gulp.file 中的脚本发生冲突

【问题讨论】：

标签： javascript html gulp

【解决方案1】：

解决方案可能是将函数传递给 gulp.dest 以告诉他需要在哪个文件夹中写入文件。试试看：

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.
    }));
});

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

【讨论】：