Cómo automatizar tareas en código de Visual Studio

El uso de una herramienta de compilación como Grunt o Gulp puede ahorrarle mucho tiempo de la etapa de desarrollo al automatizando unos pocos repetitivos “Tareas”. Si opta por Visual Studio Code como su editor de código, su flujo de trabajo podría ser aún más ágil y, eventualmente, ser más productivo..

Construido con Node.js en su núcleo, Visual Studio Code le permite Ejecuta las tareas sin tener que salir de la ventana del editor.. Y te mostraremos cómo hacerlo en este post..

Vamos a empezar.

Requisitos previos

Para empezar, deberá tener Node, NPM (Node Package Manager) y la CLI (Command Line Interface) de la herramienta de compilación respectiva, todo instalado en su sistema. Si no está seguro de si tiene todos estos instalados, verificarlos es tan fácil como escribir las líneas de comando.

También asumiré que los archivos y directorios en su proyecto están en su lugar apropiado, incluyendo la configuración archivo, como el gulpfile.js o Gruntfile.js Si usas Grunt en su lugar. Y dependencias del proyecto registradas en. paquete.json También debe instalarse en este punto.

A continuación se detallan nuestros directorios y archivos de proyectos, creados con el propósito de demostración en este articulo. Tu proyecto sin duda sería muy diferente; puede tener más o menos archivos.

. ├── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json

Utilizamos Gulp como nuestra herramienta de construcción en nuestro proyecto. Tenemos un número de tareas registradas en el gulpfile.js como sigue:

 var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var sass = require ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', function () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'comprimido')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automatizar', función () gulp.watch ([sassSrc, jsSrc], ['scripts', 'estilos']);); gulp.task ('predeterminado', ['scripts', 'estilos', 'automatizar']); 

Hay específicamente cuatro tareas que hemos especificado:

• guiones: la tarea que compilará nuestros archivos de JavaScript, así como también minifiemos la salida a través del complemento Gulp UglifyJS.
• estilos: la tarea que compilará nuestros archivos SCSS en CSS y también comprimirá la salida.
• automatizar: la tarea que automatizará la estilos y guiones Tarea aunque el trago incorporado reloj utilidad.
• defecto: la tarea que ejecutará las tres tareas mencionadas a la vez.

Como la herramienta de compilación de nuestro proyecto está preparada, ahora también podemos automatizar estas tareas que hemos definido dentro de gulpfile.js.

Sin embargo, en caso de que no esté familiarizado con alguna de las herramientas mencionadas, le recomiendo que consulte algunas de nuestras publicaciones anteriores para incluir el tema antes de continuar..

• Cómo utilizar Grunt para automatizar su flujo de trabajo
• Empezando con Gulp.js
• La batalla de los scripts de construcción: Gulp vs Grunt

Ejecutar y automatizar tareas

Ejecutando y automatizando “Tareas” en Visual Studio Code es bastante sencillo. Primero, lanza el Paleta de comandos presionando la combinación de teclas Shift + Cmd + P oa través de la barra de menú, Ver> Comando Paleta Si eso es más conveniente para ti. A continuación, escriba Tareas, y seleccione “Tareas: Ejecutar tarea” De la poca cantidad de opciones mostradas en el resultado..

El código de Visual Studio es inteligente; Sabe que estamos usando Gulp, recoger gulpfile.js, y revelar la lista de tareas que hemos definido dentro del archivo.

Aquí, seleccionemos la defecto Tarea. Las hojas de estilo SCSS y el archivo JavaScripts se compilarán al seleccionar esta tarea, y también activará la automatizar Tarea que permitirá al estilos y guiones Tarea para correr de forma autónoma hacia adelante..

Al cambiar un archivo, una hoja de estilo o un archivo JavaScript, se compilará automáticamente. Visual Studio Code también genera informes oportunos para cada éxito y error que ocurra en la operación de compilación..

Profunda integracion

Además, podemos integrar nuestro proyecto en Visual Studio Code para optimizar nuestro flujo de trabajo. E integrar nuestras tareas en Visual Studio Code es fácil y rápido.

Inicie la paleta de comandos y seleccione “Configurar Task Runner”. Visual Studio Code le dará una lista de las herramientas de compilación que admite. En este caso, seleccionamos “Trago”, Ya que ese es el que estamos usando en nuestro proyecto en este artículo..

El código de Visual Studio debería haber creado un nuevo archivo llamado tareas.json debajo .vscode en tu directorio de proyectos. tareas.json, en este punto, contiene la configuración desnuda.

Y como puedes ver abajo, el Tareas La propiedad actualmente es solo una matriz vacía..

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "task": []

Extender el Tareas valor como sigue.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "task": ["taskName": " predeterminado "," isBuildCommand ": true,]

los nombre de la tarea Especifica el nombre de la tarea en nuestro gulpfile.js que nos gustaría correr. los isBuildCommand propiedad define el defecto comando como el “Construir” mando. Ahora, en lugar de ir alrededor de la paleta de comandos, simplemente puede presionar la combinación de teclas Shift + Cmd + B.

Alternativamente puede seleccionar el “Ejecutar tarea de compilación” del resultado de búsqueda de tareas en la paleta de comandos.

Terminando

Creo que Visual Studio Code es un editor de código con un gran futuro. Es rápido y está construido con algunas funciones prácticas listas para usar, incluida una que hemos mostrado en este artículo..

Hemos visto cómo ejecutar una tarea de Gulp; También puedes usar Grunt en su lugar. Hemos visto cómo integrar la tarea en Visual Studio Code y ejecutarla con una combinación de teclas, lo que hace que nuestro flujo de trabajo sea más ágil..

Esperamos que encuentre este artículo útil como referencia para ejecutar tareas de compilación, y no olvide consultar nuestros artículos anteriores para obtener más sugerencias para aprovechar al máximo el código de Visual Studio..

• Código de Visual Studio: 5 características impresionantes que lo convierten en un líder de la vanguardia
• Cómo personalizar el código de Visual Studio
• 8 potentes extensiones de código de Visual Studio para desarrolladores front-end
• Código de Visual Studio: aumento de la productividad a través de la gestión de enlace de teclas
• La influencia del diseño inclusivo de Microsoft en el código de Visual Studio