Introducción al trago:
Gulp es una herramienta para construir código en el desarrollo frontal y una herramienta poderosa para construir proyectos de automatización. No solo puede optimizar los recursos del sitio web, sino que también se pueden completar automáticamente muchas tareas repetitivas con las herramientas correctas durante el proceso de desarrollo. Con ella, no solo podemos escribir código felizmente, sino también mejorar enormemente nuestra eficiencia laboral.
Gulp es un corredor de tareas automático basado en NodeJS. Puede completar automáticamente la prueba, verificación, fusión, compresión, formateo, refrescante automático de navegador, generación de archivos de implementación de archivos como JavaScript/Coffee/Sass/Less/HTML/Image/CSS, y escuche repetir los pasos especificados después de cambiar el archivo. En términos de implementación, tomó prestada la idea de la tubería del sistema operativo UNIX. La salida del nivel anterior se convirtió directamente en la entrada del siguiente nivel, lo que hace que la operación sea muy simple. A través de este artículo, aprenderemos cómo usar Gulp para cambiar el proceso de desarrollo, haciendo que el desarrollo sea más rápido y eficiente.
Gulp es muy similar a Grunt, pero en comparación con las operaciones frecuentes de IO de Grunt, las operaciones de transmisión de Gulp pueden completar el trabajo de construcción más rápido y más conveniente.
Cuando estaba aprendiendo Gulp hoy, utilicé Gulp-Wuglify para comprimir el módulo JS. Encontré un problema: cuando usé Gulp.watch para escuchar los cambios en los archivos JS, encontré problemas de compresión repetidos.
La estructura del directorio es la siguiente:
El código GulpFile.js es el siguiente:
var gulp = require ('gulp'); var Uglify = require ('gulp -uglify'); var rangame = request ('gulp-rrename'); gulp.task ('uglify', function () {gulp.src ('./ src/js/*. js'). pipe (rename ({sufix: '. min'})). pipe (oglify ()). pipe (gulp.dest ('./ src/jsc/js' '); gulp.watch ('./ src/js/*. js', ['uglify']); watcher.on ('cambio', function (event) {console.log ('file' + event.path + 'was' + event.type + ', ejecutando tareas ...');});Después de ejecutar el comando gulp uglify:
El correspondiente *.min.js también se genera:
Pero cuando abro un archivo kong.js y lo guardo nuevamente, ocurre la siguiente situación:
Guárdelo una vez y luego comprime nuevamente. Habrá muchos archivos comprimidos JS como *.min.min ... js, y solo el primer valor kong.min.js cambiará de acuerdo con kong.js. Más tarde, revisé el siguiente documento y alguien escribió sobre Gulp -uglify y descubrí que se puede usar. Para filtrar min.js, evitar que se comprime, cambie el código:
var gulp = require ('gulp'); var uglify = require ('gulp-liflify'); var rename = request ('gulp-rename'); gulp.task ('uglify', function () {gulp.src (['./ src/js/*. js', '! gulp.watch ('./ src/js/*. js', ['uglify']); watcher.on ('cambio', function (event) {console.log ('file' + event.path + 'was' + event.type + ', ejecutando tareas ...');});Lo anterior es la introducción del editor a Gulp -uglify y gulp.watch () cuando se usa junto con gulp.watch (). Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!