web-dev-qa-db-fra.com

Est-il possible de passer un drapeau à Gulp pour qu’il exécute des tâches de différentes manières?

Normalement, dans Gulp, les tâches ressemblent à ceci:

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

Est-il possible de passer un indicateur de ligne de commande à gulp (ce n'est pas une tâche) et de l'exécuter de manière conditionnelle en fonction de cela? Par exemple

$ gulp my-task -a 1

Et puis dans mon 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));
});
javascriptnode.jsgulp
362
asolberg

Gulp ne propose aucun type d’utilisation pour cela, mais vous pouvez utiliser l’un des nombreux analyseurs syntaxiques de commandes. J'aime yargs . Devrait être:

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

Vous pouvez également le combiner avec gulp-if pour acheminer conditionnellement le flux, ce qui est très utile pour la création de développement par rapport à celle de 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/'));
});
_

Et appelez avec _gulp my-js-task_ ou _gulp my-js-task --production_.

522
Caio Cunha

Modifier

gulp-util est obsolète et doit être évité. Il est donc recommandé d'utiliser minimist , lequel gulp-util a déjà été utilisé.

J'ai donc modifié certaines lignes de mon fichier gulp pour supprimer gulp-util:

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

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

Original

Dans mon projet, j'utilise le drapeau suivant:

gulp styles --theme literature

Gulp propose un objet gulp.env pour cela. Il est obsolète dans les versions plus récentes, vous devez donc utiliser gulp-util pour cela. Les tâches ressemblent à ceci:

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

Le paramètre d'environnement est disponible pour toutes les sous-tâches. Je peux donc aussi utiliser ce drapeau pour la tâche de surveillance:

gulp watch --theme literature

Et ma tâche de styles fonctionne également.

Ciao Ralf

101
RWAM

Voici une recette rapide que j'ai trouvée:

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

Réf. Originale (plus disponible): https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-params-from-cli.md

Alternative avec minimiste

De la référence mise à jour: 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
57
AEQ

Il existe un moyen très simple de créer des indicateurs on/off sans analyser les arguments. gulpfile.js n'est qu'un fichier qui s'exécute comme un autre, vous pouvez donc:

var flags = {
  production: false
};

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

Et utilisez quelque chose comme gulp-if pour exécuter conditionnellement une étape

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

Exécuter gulp build produira un Nice html, tandis que gulp production build le réduira.

39
Emil Ivanov

Si vous avez des arguments stricts (ordonnés!), Vous pouvez les obtenir simplement en cochant _process.argv_.

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

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

Exécutez-le: _gulp --env production_

... Cependant, je pense que c'est aussi strict et non blindé! Alors, j'ai bricolé un peu ... et je me suis retrouvé avec cette fonction utilitaire:

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

Il mange un nom d'argument et le recherchera dans _process.argv_. Si rien n'a été trouvé, il crache null. Sinon, s'il n'y a pas d'argument suivant ou si l'argument suivant est une commande et non une valeur (nous différons par un tiret), true est renvoyé. (C'est parce que la clé existe, mais il n'y a aucune valeur). Si tous les cas précédents échouent, la valeur d'argument suivante est ce que nous obtenons.

> 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
_

Ok, ça suffit pour le moment ... Voici un exemple simple utilisant 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"));
});
_

Exécutez-le _gulp --env production_

32
yckart

J'ai construit un plugin pour injecter des paramètres de la ligne de commande dans le rappel de tâche.

gulp.task('mytask', function (production) {
  console.log(production); // => true
});

// gulp mytask --production

https://github.com/stoeffel/gulp-param

Si quelqu'un trouve un bogue ou a une amélioration, je suis heureux de fusionner les relations publiques.

7
stoeffel

Et si vous utilisez TypeScript (gulpfile.ts), faites ceci pour yargs (en vous basant sur l'excellente réponse de @Caio Cunha https://stackoverflow.com/a/23038290/1019307) et autres commentaires ci-dessus):

Installer

npm install --save-dev yargs

typings install dt~yargs --global --save

.ts fichiers

Ajoutez ceci aux fichiers .ts:

import { argv } from 'yargs';

...

  let debug: boolean = argv.debug;

Cela doit être fait dans chaque fichier .ts individuellement (même les fichiers tools/tasks/project qui sont importés dans le gulpfile.ts/js).

Courir

gulp build.dev --debug

Ou sous npm passez l'argument à avaler:

npm run build.dev -- --debug
4
HankCa

Passer des arguments depuis la ligne de commande

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

Puis lancez gulp avec:

$ gulp scripts --env development

Source

2
HaNdTriX
var isProduction = (process.argv.indexOf("production")>-1);

CLI gulp production appelle ma tâche de production et définit un indicateur pour toutes les conditions.

2
Keegan's hairstyle 82

Nous voulions passer un fichier de configuration différent pour différents environnements - un pour production, dev et test. C'est le code dans le fichier 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;
}

C'est le code dans le fichier 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);
    }

Et ensuite, le lancer gulp --env=testing

1
Sara Inés Calderón

Cela fait longtemps que cette question n’a pas été posée, mais peut-être que cela aidera quelqu'un.

J'utilise GULP CLI 2.0.1 (installé globalement) et GULP 4.0.0 (installé localement). Voici comment vous le faites sans plugin supplémentaire. Je pense que le code est assez explicite.

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;

Et lancez depuis la console:

gulp availableTasks

Puis lancez-vous et voyez les différences:

gulp availableTasks --verbose
1
TMMC