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

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

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

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

1 个答案: