Question

目标：通过使用flag --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()函数/任务。

这会将folderName发送到函数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

我的一位同事能够帮助解决这个问题。他没有使用gulp.utils，而是使用带有slipt（，）的yargs.argv.theme。这允许用户传递--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 }));
  }
}

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

2 个答案: