Gulp: passage de plusieurs paramètres de ligne de commande à la même tâche

Question

Objectif: Créez /src/assets/(theme)/*.scss en passant le paramètre dans la ligne de commande en utilisant flag --theme. Je résolu en utilisant une étape de Gulp-

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

restante: gulp build --production --theme folderName1, folderName2, folderName* Passing plusieurs valeurs de thème --theme folderName1 folderName2 à la même fonction/tâche sass().

Cela enverrait folderName à fonctionner 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' 
    ]) 
    ... 

    ... 
} 

Would créer un argsList comme celui-ci SitePoint article discute travail?

Answer 1

Un de mes collègues a été en mesure d'aider à résoudre ce problème. Au lieu d'utiliser gulp.utils, il était capable d'utiliser yargs.argv.theme avec slipt (,). Cela permet à un utilisateur de passer le paramètre --theme et de passer autant d'éléments séparés par des virgules que souhaité.

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

Answer 2

S'il vous plaît examiner votre idée. Ce paquet ressemble à résoudre un sujet similaire https://www.npmjs.com/package/gulp-sass-themes Vous devez seulement grouper vos thèmes dans le sous-dossier.

De l'autre côté gulp.src accepte string et array de sorte que vous pouvez transmettre cette information à partir de la ligne de commande. https://github.com/gulpjs/gulp/blob/master/docs/API.md