Gulp：将多个命令行参数传递给同一个任务

Question

目标： 通过使用标志 --theme 在命令行中传递参数来构建 /src/assets/(theme)/*.scss。我使用 gulp-utils 解决了第一步

function sass() {
  // return gulp.src('/src/assets/scss/**/*.scss')
  return gulp.src(['src/assets/scss/' + (util.env.theme ? util.env.theme : 'app') + '.scss'])
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // Comment in the pipe below to run UnCSS in production
    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

剩余： gulp build --production --theme folderName1, folderName2, folderName* 将多个主题值 --theme folderName1 folderName2 传递给同一个 sass() 函数/任务。

这会将文件夹名称发送到函数 sass()

function sass() {
  // return gulp.src('/src/assets/scss/**/*.scss')
  return gulp.src([
     'src/assets/scss/folderName1/*.scss',
     'src/assets/scss/folderName2/*.scss',
     'src/assets/scss/folderName3/*.scss'
  ])
    ...

    ...
}

会创建一个像 SitePoint article 这样讨论工作的 argsList 吗？

Answer 1

请检查您的想法。这个包看起来像解决类似的话题 https://www.npmjs.com/package/gulp-sass-themes 您只需将主题分组到子文件夹中。

从另一端gulp.src 接受string 和array，因此您可以从命令行传递此信息。 https://github.com/gulpjs/gulp/blob/master/docs/API.md

Answer 2

我的一位同事能够帮助解决此问题。他可以使用 yargs.argv.theme 和 slipt(,)，而不是使用 gulp.utils。这允许用户传递 --theme 参数并根据需要传递尽可能多的逗号分隔项。

  function sass() {
  if (yargs.argv.theme) {
    let collection = yargs.argv.theme.split(','),
      results = collection.map(item =>  `./src/assets/scss/${item}/*.scss`);

    return gulp.src(results)
      .pipe($.sourcemaps.init())
      .pipe($.sass({
        includePaths: PATHS.sass
      })
        .on('error', $.sass.logError))
      .pipe($.autoprefixer({
        browsers: COMPATIBILITY
      }))
      // Comment in the pipe below to run UnCSS in production
      //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
      .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
      .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
      .pipe(gulp.dest(PATHS.dist + '/assets/css'))
      .pipe(browser.reload({ stream: true }));
  }
}