Gulp에 플래그를 전달하여 다른 방식으로 작업을 실행할 수 있습니까?


369

일반적으로 Gulp 작업에서는 다음과 같습니다.

gulp.task('my-task', function() {
    return gulp.src(options.SCSS_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

명령 줄 플래그를 gulp (작업이 아님)에 전달하고 그에 따라 조건부로 작업을 실행할 수 있습니까? 예를 들어

$ gulp my-task -a 1

그리고 내 gulpfile.js에서 :

gulp.task('my-task', function() {
        if (a == 1) {
            var source = options.SCSS_SOURCE;
        } else {
            var source = options.OTHER_SOURCE;
        }
        return gulp.src(source)
            .pipe(sass({style:'nested'}))
            .pipe(autoprefixer('last 10 version'))
            .pipe(concat('style.css'))
            .pipe(gulp.dest(options.SCSS_DEST));
});

11
노드에서 실행 중이므로 process.argv명령 줄 인수에 액세스하는 데 사용할 수 있습니다.
zzzzBov

답변:


528

Gulp는 어떤 종류의 유틸리티도 제공하지 않지만 많은 명령 인수 파서 중 하나를 사용할 수 있습니다. 나는 좋아한다 yargs. 해야한다:

var argv = require('yargs').argv;

gulp.task('my-task', function() {
    return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

gulp-if스트림을 조건부로 파이프하기 위해이를 결합하여 개발자와 제품 제작에 매우 유용합니다.

var argv = require('yargs').argv,
    gulpif = require('gulp-if'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {
  gulp.src('src/**/*.js')
    .pipe(concat('out.js'))
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulpif(argv.production, rename({suffix: '.min'})))
    .pipe(gulp.dest('dist/'));
});

gulp my-js-task또는로 전화하십시오 gulp my-js-task --production.


45
이것은 공식 gulp github, 필수 요소에서 어떻게 든 언급되어야합니다!
Max

2
이 비디오는 멍청이없이 이것을 달성하는 방법을 설명합니다 : youtube.com/watch?v=gRzCAyNrPV8
plankguy

9
안녕하세요 @ plankguy, 비디오는 매우 좋습니다. 감사. lib없이 수동으로 환경 변수를 구문 분석하는 방법을 보여줍니다. 작은 차이는 비디오가 환경 변수 에 관한 것이고 위의 예는 명령 줄 인수 에 관한 것입니다. Yargs는 변수 구문 분석을 추상화하여 소비를 단순화하는 또 다른 도구입니다.
Caio Cunha

12
사용하면 npm run gulp다음과 같이 사용해야합니다 npm run gulp -- --production.
ivkremer

3
이것은 공식 gulp github (문자 그대로) 에서 언급 됩니다.
fracz

101

편집하다

gulp-util되어 사용되지 하고 사용을 권장합니다, 그래서 피할 수 있어야 minimist 대신, gulp-util이미 사용.

그래서 gulpfile에서 일부 줄을 변경하여 제거했습니다 gulp-util.

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

gulp.task('styles', function() {
  return gulp.src(['src/styles/' + (argv.theme || 'main') + '.scss'])
    
});

기발한

내 프로젝트에서 다음 플래그를 사용합니다.

gulp styles --theme literature

Gulp는이를위한 객체 gulp.env를 제공합니다. 최신 버전에서는 더 이상 사용되지 않으므로 gulp-util을 사용해야합니다. 작업은 다음과 같습니다.

var util = require('gulp-util');

gulp.task('styles', function() {
  return gulp.src(['src/styles/' + (util.env.theme ? util.env.theme : 'main') + '.scss'])
    .pipe(compass({
        config_file: './config.rb',
        sass   : 'src/styles',
        css    : 'dist/styles',
        style  : 'expanded'

    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(livereload(server))
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

환경 설정은 모든 하위 작업 중에 사용할 수 있습니다. 시계 작업에서도이 플래그를 사용할 수 있습니다.

gulp watch --theme literature

그리고 내 스타일 작업도 작동합니다.

챠오 랄프


6
gulp.env콘솔 로그 메시지를 실행할 때 알 수 있듯이 사용되지 않습니다 . 그들은 자신의 파서를 사용하도록 요청 및 제안 yargsminimist.
Caio Cunha

2
귀하의 힌트에 대한 @CaioToOn 감사합니다. 내 답변과 프로젝트도 업데이트했습니다.;)
RWAM

4
을 (를) 단축 util.env.theme ? util.env.theme : 'main'할 수 있습니다 util.env.theme || 'main'. 어쨌든 +1.
Renan

9
gulp-utilminimist명령 행 인수 구문 분석을 위해 라이브러리를 사용 합니다. 따라서를 사용하는 경우 gulp-util해당 목적을 위해 추가 라이브러리가 필요하지 않습니다. 문서 : github.com/substack/minimist
Rockallite

57

내가 찾은 빠른 요리법은 다음과 같습니다.

gulpfile.js

var gulp   = require('gulp');

// npm install gulp yargs gulp-if gulp-uglify
var args   = require('yargs').argv;
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var isProduction = args.env === 'production';

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(isProduction, uglify())) // only minify if production
    .pipe(gulp.dest('dist'));
});

CLI

gulp scripts --env production

원본 참조 (더 이상 사용할 수 없음) : https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-params-from-cli.md

미니멀리스트와 대안

업데이트 된 참조에서 : https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md

gulpfile.js

// npm install --save-dev gulp gulp-if gulp-uglify minimist

var gulp = require('gulp');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var minimist = require('minimist');

var knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'production' }
};

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

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(options.env === 'production', uglify())) // only minify if production
    .pipe(gulp.dest('dist'));
});

CLI

gulp scripts --env production

2
레시피 링크가 사라진 것 같습니다. minimist 패키지를 대신 사용하는 또 다른 패키지가 있습니다 : pass-arguments-from-cli.md . 펄프 자체 가 미니멀리스트를 사용하기 때문에 이치에 맞습니다 .
yuvilio

39

on/off인수를 구문 분석하지 않고 플래그 를 수행하는 매우 간단한 방법이 있습니다. gulpfile.js다른 파일처럼 실행되는 파일이므로 다음과 같이 할 수 있습니다.

var flags = {
  production: false
};

gulp.task('production', function () {
  flags.production = true;
});

gulp-if조건부로 단계를 실행하는 것과 같은 것을 사용하십시오.

gulp.task('build', function () {
  gulp.src('*.html')
    .pipe(gulp_if(flags.production, minify_html()))
    .pipe(gulp.dest('build/'));
});

실행 gulp build하면 멋진 HTML이 생성되지만 gulp production build축소됩니다.


2
좋은 아이디어, yargs를 사용하여 저장, vars를 설정하는 '생산 전'작업을 통해이를 확장했으며 '생산'에는 [ 'build', 'pre-production']의 종속성 배열이 있습니다. 그렇게하면 'gulp production'을 실행할 수 있습니다.
Keegan 82

좋은! 스트림을 설정하기 전에 이것을 사용하고 있습니다gulp.task('mytask', function() { if (flags.myflag ) { flaggedtask } else { unflaggedask } });
Henry

나는 이것이
gulp

@ Keegan'shairstyle82 비슷한 작업을 수행했지만의 속성을 설정할 때 경쟁 조건이 없도록 실행 순서 를 사용해야했습니다 flags.
CalMlynarczyk 2016 년

3
이 방법의 단점은 터미널의 gulp 명령에 인수를 전달하는 대신 플래그 변수를 변경할 때마다 gulpfile.js를 변경해야한다는 것입니다.
jbyrd

33

엄격한 (순서대로!) 인수가있는 경우 간단히 확인하여 얻을 수 있습니다 process.argv.

var args = process.argv.slice(2);

if (args[0] === "--env" && args[1] === "production");

그것을 실행하십시오 : gulp --env production

... 그러나, 나는이이라고 생각 요오 ... 엄격하고하지 방탄! 그래서, 나는 조금 놀아서 ...이 유틸리티 기능으로 끝났습니다 :

function getArg(key) {
  var index = process.argv.indexOf(key);
  var next = process.argv[index + 1];
  return (index < 0) ? null : (!next || next[0] === "-") ? true : next;
}

인수 이름을 먹고에서 이것을 검색합니다 process.argv. 아무것도 발견되지 않으면 밖으로 뱉어 null. 그렇지 않으면 다음 인수가 아니거나 다음 인수가 명령이고 값이 아닌 경우 (대시와 다름) true반환됩니다. 키가 존재하지만 값이 없기 때문입니다. 이전의 모든 경우에 실패하면 다음 인수 값이 우리가 얻는 것입니다.

> gulp watch --foo --bar 1337 -boom "Foo isn't equal to bar."

getArg("--foo") // => true
getArg("--bar") // => "1337"
getArg("-boom") // => "Foo isn't equal to bar."
getArg("--404") // => null

좋아, 지금은 충분하다 ... 다음은 gulp 를 사용한 간단한 예제이다 :

var gulp = require("gulp");
var sass = require("gulp-sass");
var rename = require("gulp-rename");

var env = getArg("--env");

gulp.task("styles", function () {
  return gulp.src("./index.scss")
  .pipe(sass({
    style: env === "production" ? "compressed" : "nested"
  }))
  .pipe(rename({
    extname: env === "production" ? ".min.css" : ".css"
  }))
  .pipe(gulp.dest("./build"));
});

그것을 실행 gulp --env production


인수 이름 앞에는 대시 ( if (args[0] === '--env' && args[1] === 'production');
:)가 붙어야합니다.

@yckart-코드 예제에서 getArg에 require ( '..')를 추가해야 할 것입니다.
jbyrd

7

커맨드 라인의 매개 변수를 작업 콜백에 삽입하는 플러그인을 만들었습니다.

gulp.task('mytask', function (production) {
  console.log(production); // => true
});

// gulp mytask --production

https://github.com/stoeffel/gulp-param

누군가 버그를 발견하거나 개선했다면 PR을 병합 해 드리겠습니다.


4

그리고 typescript ( gulpfile.ts)를 사용하는 경우 다음을 수행하십시오 yargs(@Caio Cunha의 탁월한 답변 https://stackoverflow.com/a/23038290/1019307 및 위의 다른 의견).

설치

npm install --save-dev yargs

typings install dt~yargs --global --save

.ts 파일들

이것을 .ts 파일에 추가하십시오.

import { argv } from 'yargs';

...

  let debug: boolean = argv.debug;

이것은 개별적으로 각 .TS 파일 (도 수행해야합니다 tools/tasks/project로 가져 파일 gulpfile.ts/js).

운영

gulp build.dev --debug

또는 npmarg를 통과하여 펄프 에 전달하십시오.

npm run build.dev -- --debug

2

명령 행에서 인수 전달

// npm install --save-dev gulp gulp-if gulp-uglify minimist

var gulp = require('gulp');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var minimist = require('minimist');

var knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'production' }
};

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

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(options.env === 'production', uglify())) // only minify in production
    .pipe(gulp.dest('dist'));
});

그런 다음 다음과 같이 gulp를 실행하십시오.

$ gulp scripts --env development

출처


2
var isProduction = (process.argv.indexOf("production")>-1);

CLI gulp production는 프로덕션 작업을 호출하고 모든 조건에 대한 플래그를 설정합니다.


1

우리는 프로덕션 , 개발테스트를 위한 환경에 따라 다른 구성 파일을 전달하려고했습니다 . 이것은 gulp 파일의 코드입니다.

//passing in flag to gulp to set environment
//var env = gutil.env.env;

if (typeof gutil.env.env === 'string') {
  process.env.NODE_ENV = gutil.env.env;
}

이것은 app.js 파일의 코드입니다.

  if(env === 'testing'){
      var Config = require('./config.testing.js');
      var Api = require('./api/testing.js')(Config.web);
    }
    else if(env === 'dev'){
       Config = require('./config.dev.js');
        Api = require('./api/dev.js').Api;
    }
    else{
       Config = require('./config.production.js');
       Api = require('./api/production.js')(Config.web);
    }

그런 다음 꿀꺽 꿀꺽 --env=testing


1

이 질문이 게시 된 지 얼마되지 않았지만 누군가에게 도움이 될 것입니다.

GULP CLI 2.0.1 (전 세계적으로 설치됨)과 GULP 4.0.0 (로컬로 설치됨)을 사용하고 있습니다. 추가 플러그인없이 사용하는 방법은 다음과 같습니다. 나는 코드가 매우 설명 적이라고 생각합니다.

var cp = require('child_process'), 
{ src, dest, series, parallel, watch } = require('gulp');

// == availableTasks: log available tasks to console
function availableTasks(done) {
  var command = 'gulp --tasks-simple';
  if (process.argv.indexOf('--verbose') > -1) {
    command = 'gulp --tasks';
  }
  cp.exec(command, function(err, stdout, stderr) {
    done(console.log('Available tasks are:\n' + stdout));
  });
}
availableTasks.displayName = 'tasks';
availableTasks.description = 'Log available tasks to console as plain text list.';
availableTasks.flags = {
  '--verbose': 'Display tasks dependency tree instead of plain text list.'
};
exports.availableTasks = availableTasks;

콘솔에서 실행하십시오.

gulp availableTasks

그런 다음 차이점을 확인하십시오.

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