gulp Tutorial
Empezando con gulp

Observaciones

Versiones

Instalación o configuración

1. Instale Node.js y NPM:

Gulp requiere Node.js y NPM, el administrador de paquetes de Node. La mayoría de los instaladores incluyen NPM con Node.js. Consulte la documentación de instalación o confirme que ya está instalado ejecutando el siguiente comando en su terminal,

npm -v
// will return NPM version or error saying command not found

2. Instala gulp globalmente:

Si ya instaló una versión de gulp globalmente, ejecute npm rm --global gulp para asegurarse de que su versión anterior no coincida con gulp-cli .

$ npm install --global gulp-cli

3. Inicialice el directorio de su proyecto:

$ npm init

4. Instale gulp en las devoluciones de su proyecto:

$ npm install --save-dev gulp

5. Cree un gulpfile.js en la raíz de su proyecto:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. Ejecutar trago:

$ gulp

La tarea por defecto se ejecutará y no hará nada.

Para ejecutar tareas individuales, use gulp <task> <othertask> .

Dependencia de la tarea

Puede ejecutar tareas en serie, pasando un segundo parámetro a gulp.task() .

Estos parámetros son una serie de tareas que deben ejecutarse y completarse antes de que su tarea se ejecute:

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

También puede omitir la función si solo desea ejecutar un paquete de tareas de dependencia:

gulp.task('build', ['array', 'of', 'task', 'names']);

Nota: Las tareas se ejecutarán en paralelo (todas a la vez), así que no asuma que las tareas se iniciarán / finalizarán en orden. Iniciando gulp v4 , gulp.series() debe usarse si el orden de ejecución de las tareas de dependencia es importante.

Archivo concat js en subcarpeta usando gulp

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

gulp documentos de la CLI

Banderas

gulp tiene muy pocas banderas que conocer. Todas las demás banderas son para tareas para usar si es necesario.

• -v o --version mostrará las versiones globales y locales.
• --require <module path> requerirá un módulo antes de ejecutar el gulpfile. Esto es útil para transpilers pero también tiene otras aplicaciones. Puedes usar múltiples banderas --require
• --gulpfile <gulpfile path> configurará manualmente la ruta de gulpfile. Útil si tienes múltiples gulpfiles. Esto establecerá la CWD en el directorio gulpfile también
• --cwd <dir path> configurará manualmente la CWD. La búsqueda del gulpfile, así como la relatividad de todos los requisitos será desde aquí.
• -T o --tasks mostrará el árbol de dependencias de la tarea para el gulpfile cargado
• --tasks-simple mostrará una lista de tareas de texto --tasks-simple para el gulpfile cargado
• --color forzará a los complementos de trago y trago a mostrar colores incluso cuando no se detecte soporte de color
• --no-color forzará que los complementos de trago y trago no muestren colores incluso cuando se detecta soporte de color
• --silent deshabilitará todo el registro de --silent

La CLI agrega process.env.INIT_CWD, que es el cwd original desde el que se inició.

Indicadores de tareas específicas

Consulte este enlace de StackOverflow para saber cómo agregar indicadores específicos de tareas

Tareas

Las tareas se pueden ejecutar ejecutando gulp <task> <othertask> . Simplemente ejecutando gulp ejecutará la tarea que registró llamada por default . Si no hay una tarea por default , se producirá un error.

Compiladores

Puede encontrar una lista de idiomas compatibles en interpretar . Si desea agregar soporte para un nuevo idioma, envíe la solicitud de extracción / abra los problemas allí.