javascript - Är det möjligt att skicka en flagga till Gulp för att få det att köra uppgifter på olika sätt?

Normalt ser Gulp-uppgifter ut så här:

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));
});

Är det möjligt att skicka en kommandoradsflagga till gulp (som inte är en uppgift) och få den att köra uppgifter villkorligt baserat på det? Till exempel

gulp my-task -a 1

Och sedan i min 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));
});

Svar #1

Gulp erbjuder ingen typ av verktyg för det, men du kan använda en av de många kommandoargparserarna. Jag gillar yargs. Det borde vara:

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));
});

Du kan också kombinera det med gulp-if för att villkorligt leda strömmen, mycket användbart för utvecklings- respektive produktionsbyggen:

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/'));
});

Och kalla på med gulp my-js-task eller gulp my-js-task --production.

Svar #2

Redigera

gulp-util är föråldrat och bör undvikas, så det rekommenderas att istället använda minimist, som gulp-util redan använde.

Så jag har ändrat några rader i min gulpfile för att ta bort gulp-util:

var argv = require('minimist')(process.argv.slice(2));

gulp.task('styles', function() {
  return gulp.src(['src/styles/' + (argv.theme || 'main') + '.scss'])
    …
});

Original

I mitt projekt använder jag följande flagga:

gulp styles --theme literature

Gulp erbjuder ett objekt gulp.env för det. Det är föråldrat i nyare versioner, så du måste använda gulp-util för det. Uppgifterna ser ut så här:

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' }));
});

Miljöinställningen är tillgänglig under alla deluppgifter. Så jag kan använda den här flaggan på bevakningsuppgiften också:

gulp watch --theme literature

Och min stilar-uppgift fungerar också.

Hej Ralf

Svar #3

Här är ett snabbt recept jag hittade:

gulpfil.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

Original Ref (inte tillgänglig längre): https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-params-from-cli.md

Alternativ med minimist

Från Uppdaterad Referens: https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md

gulpfil.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

Svar #4

Det finns ett väldigt enkelt sätt att göra på/av-flaggor utan att parsa argumenten. gulpfile.js är bara en fil som körs som vilken annan fil som helst, så du kan göra:

var flags = {
  production: false
};

gulp.task('production', function () {
  flags.production = true;
});

Och använd något som gulp-if för att villkorligt utföra ett steg

gulp.task('build', function () {
  gulp.src('*.html')
    .pipe(gulp_if(flags.production, minify_html()))
    .pipe(gulp.dest('build/'));
});

Att köra gulp build kommer att producera en fin html, medan gulp production build kommer att minimera den.

Svar #5

Om du har några strikta (ordnade!) argument, kan du få dem enkelt genom att kontrollera process.argv.

var args = process.argv.slice(2);

if (args[0] === "--env" && args[1] === "production");

Kör det: gulp --env production

...men jag tycker att detta är för strikt och inte idiotsäkert! Så, jag pillade lite... och slutade med denna hjälpfunktion:

function getArg(key) {
  var index = process.argv.indexOf(key);
  var next = process.argv[index + 1];
  return (index < 0) ? null : (!next || next[0] === "-") ? true : next;
}

Den tar ett argument-namn och söker efter detta i process.argv. Om inget hittas returnerar den null. Annars, om det inte finns något nästa argument eller om nästa argument är ett kommando och inte ett värde (vi skiljer med ett bindestreck) returneras true. (Detta beror på att nyckeln finns, men det finns inget värde). Om alla tidigare fall misslyckas får vi nästa argument-värde.

> gulp watch --foo --bar 1337 -boom "Foo är inte lika med bar."

getArg("--foo") // => true
getArg("--bar") // => "1337"
getArg("-boom") // => "Foo isn't equal to bar."
getArg("--404") // => null

Ok, nog för nu... Här är ett enkelt exempel som använder 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"));
});

Kör det gulp --env production

Relaterade artiklar