Gulp 작업에 매개 변수 전달


194

일반적으로 콘솔에서 gulp 작업을 다음과 같은 방법으로 실행할 수 있습니다 gulp mytask. 어쨌든 gulp 작업에 매개 변수를 전달할 수 있습니까? 가능하면 어떻게 할 수 있는지 예를 보여주십시오.



답변:


269

없이는 프로그램을 유지할 수없는 기능입니다. 당신은 yargs 를 시도 할 수 있습니다 .

npm install --save-dev yargs

다음과 같이 사용할 수 있습니다.

gulp mytask --production --test 1234

코드에서 예를 들면 다음과 같습니다.

var argv = require('yargs').argv;
var isProduction = (argv.production === undefined) ? false : true;

당신의 이해를 돕기 위해:

> gulp watch
console.log(argv.production === undefined);  <-- true
console.log(argv.test === undefined);        <-- true

> gulp watch --production
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- true
console.log(argv.test);                      <-- undefined

> gulp watch --production --test 1234
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- false
console.log(argv.test);                      <-- 1234

여기에서 가져갈 수 있기를 바랍니다.

사용할 수있는 또 다른 플러그인 인 minimist가 있습니다. yargs와 minimist에 대한 좋은 예가있는 또 다른 게시물이 있습니다. ( 다른 방법으로 작업을 실행하도록 Gulp에 플래그를 전달할 수 있습니까? )


13
예제에 감사드립니다.
Allen Rice

자바 스크립트에서 어떻게 액세스합니까?
vini

yargs와 함께 gulp를 사용하는 경우 다음을 확인하십시오. '고객'태스크가 있고 필수 명령에 대한 매개 변수 확인에서 yargs 빌드를 사용하지 않으려는 경우 : command ( "customer", "고객 디렉토리 작성")
suther

gulp와 함께 필요한 '명령'에 대해 내장 된 매개 변수 검사 yargs를 사용하려면 아래 내 의견을 참조하십시오. stackoverflow.com/a/41412558/1256697
suther

5
(argv.production === undefined) ? false : true;와 같습니다 argv.production !== undefined.
JimmyMcHoover

136

추가 종속성을 추가하지 않으려면 노드 process.argv가 유용하다는 것을 알았습니다 .

gulp.task('mytask', function() {
    console.log(process.argv);
});

그래서 다음과 같이 :

gulp mytask --option 123

표시되어야합니다 :

[ 'node', 'path/to/gulp.js', 'mytask', '--option', '123']

원하는 매개 변수가 올바른 위치에 있다고 확신하면 플래그가 필요하지 않습니다. **이 경우 다음을 사용하십시오.

var option = process.argv[4]; //set to '123'

그러나 옵션이 설정되지 않았거나 다른 위치에있을 수 있으므로 더 나은 아이디어는 다음과 같습니다.

var option, i = process.argv.indexOf("--option");
if(i>-1) {
    option = process.argv[i+1];
}

이렇게하면 다음과 같은 여러 옵션의 변형을 처리 할 수 ​​있습니다.

//task should still find 'option' variable in all cases
gulp mytask --newoption somestuff --option 123
gulp mytask --option 123 --newoption somestuff
gulp mytask --flag --option 123

** 편집 : 노드 스크립트의 경우 true이지만 gulp는 앞에 "-"가없는 것을 다른 작업 이름으로 해석합니다. 따라서 gulp mytask 123gulp에서 '123'이라는 작업을 찾을 수 없으므로 사용 이 실패합니다.


1
"var option, i = process, argv.indexOf ("-option ");"에 오타가 있습니다. 나는 그것이 proccess.argv 여야한다고 믿는다.
루이스 파울로 Lohmann은

아, 그래야합니다. 수정되었습니다. 감사합니다 @ luis
Trevedhek

방금 --dev 플래그를 확인하고 싶었으므로 프로덕션 환경과 낮은 환경을 구별 할 수있었습니다. 이것은 추가 종속성을 추가하지 않고 트릭을 수행합니다. 감사!
b01

1
나를 위해, gulp myTask --production결과는 다음 process.argv과 같습니다[pathToNode, pathToGulp, 'myTask', '--production']
Sung Cho

2
아마 바뀌었을 것입니다. 나는 같은 차이점을 가진 오래된 예를 보았습니다. 어쨌든, 당신은 그것을 디버깅하고 사건을 볼 수 있습니다. 의존성이 전혀
Juan Juan

19

꿀꺽 꿀꺽 매개 변수를 전달하면 몇 가지를 의미 할 수 있습니다.

  • 명령 행에서 gulpfile로 (이미 여기에 예시되어 있음)
  • gulpfile.js 스크립트의 본문에서 gulp 작업까지
  • 한 번의 과업에서 다른 과업으로.

다음은 기본 gulpfile에서 gulp 작업으로 매개 변수를 전달하는 방법입니다. 매개 변수가 필요한 작업을 자체 모듈로 이동하고 함수에 래핑하여 매개 변수를 전달할 수 있습니다.

// ./gulp-tasks/my-neat-task.js file
module.exports = function(opts){

  opts.gulp.task('my-neat-task', function(){
      console.log( 'the value is ' + opts.value );
  });

};
//main gulpfile.js file

//...do some work to figure out a value called val...
var val = 'some value';

//pass that value as a parameter to the 'my-neat-task' gulp task
require('./gulp-tasks/my-neat-task.js')({ gulp: gulp, value: val});

이것은 많은 펄프 작업이 있고 편리한 환경 설정을 전달하고자 할 때 유용 할 수 있습니다. 한 작업과 다른 작업 사이에서 작동하는지 확실하지 않습니다.


16

minimist 사용하여 공식 꿀꺽 꿀꺽 레시피가 있습니다.

https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md

기본 사항은 minimist를 사용하여 cli 인수를 분리하고 알려진 옵션과 결합합니다.

var options = minimist(process.argv.slice(2), knownOptions);

다음과 같은 것을 파싱 할 것입니다.

$ gulp scripts --env development

레시피에서 더 완전한 정보.


1
목록 상단의 가비지와 하단의 적절한 솔루션이 상향 조정되지 않는 이유는 무엇입니까? 한숨
DDD

14

로그와 같은 환경 매개 변수 및 기타 유틸리티를 사용하려면 gulp-util을 사용할 수 있습니다

/* 
  $npm install gulp-util --save-dev
  $gulp --varName 123
*/
var util = require('gulp-util');
util.log(util.env.varName);

최신 정보

gulp-util은 더 이상 사용되지 않습니다. 대신 미니멀 을 사용할 수 있습니다 .

var argv = require('minimist')(process.argv.slice(2));
console.dir(argv);

1
꿀꺽 - UTIL 2016 년 이후 사용되지 않습니다
valdeci

5

@ Ethan의 대답은 완전히 작동합니다. 내 경험상 더 노드 방법은 환경 변수를 사용하는 것입니다. 호스팅 플랫폼 (예 : Heroku 또는 Dokku)에 배포 된 프로그램을 구성하는 표준 방법입니다.

명령 행에서 매개 변수를 전달하려면 다음과 같이하십시오.

개발: gulp dev

생산: NODE_ENV=production gulp dev

문법은 다르지만 매우 유닉스이며 Heroku, Dokku 등과 호환됩니다.

코드에서 변수에 액세스 할 수 있습니다 process.env.NODE_ENV

MYAPP=something_else gulp dev

설정

process.env.MYAPP === 'something_else'

이 답변 은 다른 아이디어를 줄 수 있습니다.


4

사용 방법은 다음과 같습니다. CSS / less 작업의 경우. 모두에게 적용 할 수 있습니다.

var cssTask = function (options) {
  var minifyCSS = require('gulp-minify-css'),
    less = require('gulp-less'),
    src = cssDependencies;

  src.push(codePath + '**/*.less');

  var run = function () {
    var start = Date.now();

    console.log('Start building CSS/LESS bundle');

    gulp.src(src)
      .pipe(gulpif(options.devBuild, plumber({
        errorHandler: onError
      })))
      .pipe(concat('main.css'))
      .pipe(less())
      .pipe(gulpif(options.minify, minifyCSS()))
      .pipe(gulp.dest(buildPath + 'css'))
      .pipe(gulpif(options.devBuild, browserSync.reload({stream:true})))
      .pipe(notify(function () {
        console.log('END CSS/LESS built in ' + (Date.now() - start) + 'ms');
      }));
  };

  run();

  if (options.watch) {
    gulp.watch(src, run);
  }
};

gulp.task('dev', function () {
  var options = {
    devBuild: true,
    minify: false,
    watch: false
  };

  cssTask (options);
});

3

추가 모듈이없는 다른 방법은 다음과 같습니다.

나는 작업 이름에서 환경을 추측해야했고 'dev'작업과 'prod'작업이 있습니다.

실행할 때 gulp prodprod 환경으로 설정해야합니다. 내가 달리 gulp dev거나 다른 것을 할 때 dev 환경으로 설정해야합니다.

이를 위해 실행중인 작업 이름을 확인하십시오.

devEnv = process.argv[process.argv.length-1] !== 'prod';

2

yargs와 함께 gulp 를 사용하는 경우 다음을 확인하십시오.

'고객'작업이 있고 매개 변수 검사에서 yargs build를 사용하여 필요한 명령을 사용하지 않으려는 경우 :

.command("customer <place> [language]","Create a customer directory") 다음과 같이 전화하십시오.

gulp customer --customer Bob --place Chicago --language english

yargs는 항상 호출에 할당 된 명령이 충분하지 않다는 오류를 발생시킵니다! —

그것을 시도하고 명령에 숫자 만 추가하십시오 (걸프 작업 이름과 같지 않도록) ... 작동합니다 :

.command("customer1 <place> [language]","Create a customer directory")

yargs가이 필수 매개 변수를 확인할 수 있기 전에 펄프가 작업을 트리거하는 것 같습니다. 이것을 알아내는 데 시간이 많이 걸렸습니다.

이것이 도움이 되길 바랍니다 ..


0

이 질문에 답변하기에 늦었지만, 가장 투표가 많고 승인 된 답변 인 @Ethan의 답변에 무언가를 추가하고 싶습니다.

yargs명령 행 매개 변수를 얻는 데 사용할 수 있으며 다음과 같은 일부 매개 변수에 대한 자체 별명을 추가 할 수도 있습니다.

var args = require('yargs')
    .alias('r', 'release')
    .alias('d', 'develop')
    .default('release', false)
    .argv;

자세한 내용은이 링크를 참조하십시오. https://github.com/yargs/yargs/blob/HEAD/docs/api.md

다음은의 설명서에 지정된대로 별칭을 사용하는 것입니다 yargs. 우리는 또한 더 많은 yargs기능 을 찾을 수 있으며 커맨드 라인 전달 경험을 더욱 향상시킬 수 있습니다.

.alias (키, 별칭)

키에 대한 업데이트가 별칭으로 전파되고 그 반대로도 키 이름을 동일하게 설정하십시오.

선택적으로 .alias ()는 키를 별칭에 매핑하는 객체를 사용할 수 있습니다. 이 객체의 각 키는 정식 버전의 옵션이어야하며 각 값은 문자열 또는 문자열 배열이어야합니다.


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.