javascript - serve - gulp tutorial

¿Es posible pasar una bandera a Gulp para que ejecute tareas de diferentes maneras?

Question

Normalmente en Gulp las tareas se ven así:

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

¿Es posible pasar una marca de línea de comando para engullir (eso no es una tarea) y hacer que ejecute tareas condicionalmente en función de eso? Por ejemplo

$ gulp my-task -a 1

Y luego en mi 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));
});

Answer 1

Pasar argumentos desde la línea de comando

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

A continuación, ejecute trago con:

$ gulp scripts --env development

Source

Answer 2

Aquí hay una receta rápida que encontré:

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

Referencia original (ya no está disponible): https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-params-from-cli.md

Alternativa con minimista

De la referencia actualizada: 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

Answer 3

Construí un complemento para inyectar parámetros desde la línea de comandos en la devolución de llamada de la tarea.

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

// gulp mytask --production

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

Si alguien encuentra un error o tiene alguna mejora, me complace fusionar los RP.

Answer 4

Gulp no ofrece ningún tipo de utilidad para eso, pero puedes usar uno de los muchos parsers de comando args. Me gustan los yargs . Debiera ser:

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

También puede combinarlo con gulp-if para canalizar condicionalmente el flujo, muy útil para la creación de dev 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/''));
});

Y llame con gulp my-js-task o gulp my-js-task --production .

Answer 5

Ha pasado algún tiempo desde que se publicó esta pregunta, pero quizás ayude a alguien.

Estoy usando GULP CLI 2.0.1 (instalado globalmente) y GULP 4.0.0 (instalado localmente) aquí es cómo lo hace sin ningún complemento adicional. Creo que el código es bastante autoexplicativo.

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;

Y correr desde la consola:

gulp availableTasks

Luego corre y ve las diferencias:

gulp availableTasks --verbose

Answer 6

Hay una forma muy sencilla de hacer banderas de on/off sin analizar los argumentos. gulpfile.js es solo un archivo que se ejecuta como cualquier otro, así que puedes hacer:

var flags = {
  production: false
};

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

Y usa algo como gulp-if para ejecutar condicionalmente un paso

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

Ejecutar gulp build producirá un html agradable, mientras que gulp production build lo minimizará.

Answer 7

Queríamos pasar un archivo de configuración diferente para diferentes entornos, uno para producción , desarrollo y pruebas . Este es el código en el archivo 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;
}

Este es el código en el archivo 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);
    }

Y luego ejecutarlo trago --env=testing

Answer 8

Si tiene algunos argumentos estrictos (¡ordenados!), Puede obtenerlos simplemente verificando process.argv .

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

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

Ejecutarlo: gulp --env production

... sin embargo, creo que esto es demasiado estricto y no a prueba de balas. Entonces, juguetee un poco ... y terminé con esta función de utilidad:

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

Come un nombre de argumento y lo buscará en process.argv . Si no se encontró nada escupe null . De lo contrario, si no es el siguiente argumento o el siguiente es un comando y no un valor (diferimos con un guión), el valor true se devuelve. (Eso es porque la clave existe, pero simplemente no hay valor). Si todos los casos anteriores fallarán, el siguiente argumento-valor es lo que obtenemos.

> 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, suficiente por ahora ... Aquí hay un ejemplo simple usando 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"));
});

Ejecutarlo gulp --env production

Answer 9

Y si está utilizando mecanografia ( gulpfile.ts ), haga esto para yargs (basándose en la excelente respuesta de @Caio Cunha https://.com/a/23038290/1019307 y otros comentarios anteriores):

Instalar

npm install --save-dev yargs

typings install dt~yargs --global --save

archivos .ts

Agregue esto a los archivos .ts:

import { argv } from ''yargs'';

...

  let debug: boolean = argv.debug;

Esto se debe hacer en cada archivo .ts individualmente (incluso las tools/tasks/project archivos de tools/tasks/project que se importan en gulpfile.ts/js ).

correr

gulp build.dev --debug

O debajo de npm pasa el npm para tragar:

npm run build.dev -- --debug

Answer 10

Editar

gulp-util está en deprecated y debe evitarse, por lo que se recomienda usar minimist , que gulp-util ya se usó.

Así que he cambiado algunas líneas en mi gulpfile para eliminar gulp-util :

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

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

Original

En mi proyecto utilizo la siguiente bandera:

gulp styles --theme literature

Gulp ofrece un objeto gulp.env para eso. Está en desuso en las versiones más nuevas, por lo que debe usar gulp-util para eso. Las tareas se ve así:

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

La configuración del entorno está disponible durante todas las subtareas. Entonces puedo usar esta bandera en la tarea de reloj también:

gulp watch --theme literature

Y mi tarea de estilos también funciona.

Ciao Ralf

Answer 11

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

CLI gulp production llama a mi tarea de producción y establece una marca para cualquier condición.