是否可以将标志传递给 Gulp 以使其以不同的方式运行任务
Is it possible to pass a flag to Gulp to have it run tasks in different ways?
通常在 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 没有为此提供任何类型的实用程序,但您可以使用众多命令 args 解析器之一。我喜欢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
通话.
Edit
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
我的样式任务也有效。
再见拉尔夫
这是我找到的一个快速食谱:
古尔普文件.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'));
});
命令行界面
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
古尔普文件.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'));
});
命令行界面
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。
使用的是打字稿(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文件中单独完成(即使是导入到gulpfile.ts/js
中的tools/tasks/project
文件(。
跑
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 scripts --env development
源
var isProduction = (process.argv.indexOf("production")>-1);
CLI gulp production
调用我的生产任务并为任何条件设置标志。
这个问题发布已经有一段时间了,但也许它会帮助某人。
我正在使用 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
我们希望为不同的环境传递一个不同的配置文件 - 一个用于生产、开发和测试。这是 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;
}
这是应用程序.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
- 为什么这在IE中的工作方式与在Firefox中不同
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 使用javascript存储变量的最安全方式
- 以可优化的方式使用requirejs加载模板
- 当使用Watchify时,Browserify+Babelify Gulp任务没有终止
- 在Highcharts中,我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- 为react组件传递道具的最佳方式
- 让Webpack管理Quirky AMD定义的最佳方式
- 在承诺链中处理早期回报的最佳方式
- 如何“;过滤器”;或者以其他方式重构该数据
- gulp Iconify任务抛出错误TypeError:Path必须是字符串.收到false
- 您有更好的动态方式来缩短复杂的代码jquery吗
- 我可以以编程方式展开或折叠剑道甘特图任务吗?
- 如何以编程方式调用Gruntfile任务(通过代码)
- 使用python cgi执行任务的任何方式
- 以编程方式设置咕哝任务的选项
- 是否可以将标志传递给 Gulp 以使其以不同的方式运行任务