在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));
});
这是我找到的一个快速食谱:
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
这是我找到的一个快速食谱:
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
我们希望为不同的环境传递不同的配置文件——一个用于生产、开发和测试。下面是gulp文件中的代码:
//传入标志给gulp来设置环境
//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;
}
其他{
Config = require('./ Config .production.js');
Api = require('./ Api /production.js')(Config.web);
}
然后运行gulp—env=testing
如果你有一些严格的(ordered!)参数,那么你可以通过检查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;
}
它吃掉一个参数-name,并在process.argv中搜索这个参数。如果什么都没有找到,它吐出null。否则,如果their没有下一个参数,或者下一个参数是命令而不是值(我们用破折号不同),则返回true。(这是因为键存在,但没有值)。如果之前的所有情况都失败,那么下一个参数-value就是我们得到的。
> gulp watch——foo——bar 1337 -boom“foo不等于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——环境生产
Gulp没有为此提供任何类型的util,但您可以使用众多命令参数解析器中的一个。我喜欢码。应该是:
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结合起来,有条件地管道流,对于开发vs. prod构建非常有用:
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。