Buen ayudante para el desarrollo de front-end "Gulp"

1. La herramienta de compilación Gulp del tercer módulo

• Herramienta de construcción de front-end basada en el desarrollo de la plataforma Node (es necesario instalar node.js)
• Escribir tareas para operaciones mecanizadas Cuando desee realizar operaciones mecanizadas, ejecute un comando de línea de comando y la tarea se puede ejecutar automáticamente.
• Use máquina en lugar de manual para completar algo de compresión de código

2. ¿Qué puede hacer Gulp?

• El proyecto está en línea y los archivos HTML, CSS y JS están comprimidos y fusionados
• Conversión de sintaxis (es6, menos ...)
• Extracción de documentos públicos
• Modifique el explorador de archivos para que se actualice automáticamente

Tres, uso de Gulp

• Úselo para npm install gulpdescargar el archivo de la biblioteca gulp (no agregue -g) -g es la instalación global, si no, es la instalación del proyecto
• Crea un gulpfile.jsarchivo en el directorio raíz del proyecto.
• Estructura de carpetas de archivos del proyecto de reconstrucción srcdel directorio para colocar la distubicación del directorio de archivos de código fuente para construir el archivo
• gulpfile.jsEscribe y ejecuta tareas en archivos.
• Ejecute tareas de gulp en la herramienta de línea de comandos

Cuatro, operación práctica

• Crea una carpeta gulp-demo en el editor

• Mantenga presionada la tecla shift + botón derecho del mouse debajo de la carpeta para abrir el cd de la ventana de PowerShell
  

• Use el npm install gulparchivo de descarga de la biblioteca de gulp en esta carpeta . No cambié el recurso descargado aquí. Será más rápido cambiar al recurso espejo doméstico de Taobao
  

• Cree uno en la carpeta gulp-demo en el directorio raízgulpfile.js
  

Cinco, los métodos proporcionados en Gulp

• gulp.src (): Obtiene el archivo que será procesado por la tarea
• gulp.dest (): archivo de salida
• gulp.task (): crea una tarea gulp
• gulp.watch (): monitorear cambios de archivo
• Ejemplo de código

//通过require引入gulp
const gulp = require('gulp');
//使用gulp.task()建立任务
gulp.task('frist',() = >{
    
    
	//获取要处理的文件
 gulp.src('./src/css/base.css')
 //将处理后的文件输出到dist目录
 .pipe(gulp.dest('./dist/css'))
})

Instale la herramienta de línea de comandos gulp npm install gulp-cli -gpara que pueda usar gulp para
usar gulp, seguido del nombre de la tarea que necesita realizar, ¡

una tarea tan simple de gulp está completa!

Seis, complemento de Gulp

• gulp-htmlmin : compresión de archivos HTML

首先需要在当前文件夹下面$ npm install --save gulp-htmlmin

然后引用模块
const htmlmin = require('gulp-htmlmin');


执行任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
    
    
    //这句话的意思是返回上一级目录找到src目录下面的   后缀是html的文件
    gulp.src('./src/*.html')
    .pipe(fileinclude())
    // 压缩html文件中的代码
    .pipe(htmlmin({
    
     collapseWhitespace: true }))
    /*将压缩好的文件压缩到dist文件夹下面*/
    .pipe(gulp.dest('dist/html'));
});

保存后回到命令行界面  执行 gulp htmlmin 就可以了

• gulp-csso : comprimir css
• gulp-babel : conversión de sintaxis JavaScript
• gulp-less : menos conversión de sintaxis
• gulp-uglify : comprime y ofusca JavaScript
• gulp-file-include archivo público incluir
• Browsersync Sincronización en tiempo real del navegador

**注意！！！在引入插件的时候  需要在前面  先引入gulp ，不然的话，插件也是会无用的** 

Eso es todo para compartir esta vez. Si cree que es útil para usted, puede usar un clic para tres vínculos ~