Gulp에 플래그를 전달하여 다른 방식으로 작업을 실행할 수 있습니까?
일반적으로 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
명령 행에서 인수 전달
// 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
var isProduction = (process.argv.indexOf("production")>-1);
CLI gulp production는 프로덕션 작업을 호출하고 모든 조건에 대한 플래그를 설정합니다.
우리는 프로덕션 , 개발 및 테스트를 위한 환경에 따라 다른 구성 파일을 전달하려고했습니다 . 이것은 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
이 질문이 게시 된 지 얼마되지 않았지만 누군가에게 도움이 될 것입니다.
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
'Programing' 카테고리의 다른 글
| Android의 PreferenceActivity에서 SharedPreference를 가져 오려면 어떻게합니까? (0) | 2020.02.28 |
|---|---|
| NSOrderedSet 생성 접근 자에서 예외가 발생했습니다. (0) | 2020.02.28 |
| Ruby on Rails ActiveRecord 마이그레이션에서 너무 긴 색인 이름을 어떻게 처리합니까? (0) | 2020.02.28 |
| int에서 자릿수를 얻는 방법? (0) | 2020.02.28 |
| 열거 형“상속” (0) | 2020.02.28 |