일반적으로 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
또는 npm
arg를 통과하여 펄프 에 전달하십시오.
npm run build.dev -- --debug