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

JAVASCRIPT / 글쓴이

일반적으로 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));
});

답변

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.

답변

편집하다

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

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

챠오 랄프

답변

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

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

답변

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축소됩니다.

답변

엄격한 (순서대로!) 인수가있는 경우 간단히 확인하여 얻을 수 있습니다 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

답변

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

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

// gulp mytask --production

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

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

답변

그리고 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