Notas de estudo Gulp, processo de uso básico, funções básicas, monitoramento de uso, plug-ins

Notas simples para aprender gole. Vídeo de ensino original: https://www.bilibili.com/video/BV1NE411T7Z2?p=396 .

O processo básico de uso do gole

Inicialize o diretório do projeto:

cnpm init      //或者改为npm指令

Instale na pasta do projeto:

cnpm install [email protected] --save-dev
cnpm i gulp-scss gulp-minify-css gulp-rename -D    //一次下载多个第三方插件

Crie um arquivo gulpfile.js
Escrever tarefas no arquivo gulpfile.js

(A ferramenta de linha de comando é configurada globalmente, e haverá mais tarefas de linha de comando gulp posteriormente)
```
cnpm install gulp-cli -g
```
Execute a tarefa escrita através do nome da tarefa gulp no console

Módulo de uso padrão Common.Js

1.require () apresentar este módulo

2. Use a função neste módulo

const gulp = require('gulp');  //引入一个gulp函数库
//编写第一个任务
//参数1：任务的名字，自定义    参数2：回调函数，任务执行的功能
gulp.task('hello',function(){
    
    
})

gulp funções básicas

gulp.src()    //找到源文件路径
gulp.dest()    //找到目标文件路径，如果该文件路径不存在则会自动创建
gulp.task()    //建立gulp任务
gulp.watch()    //监控文件的变化
.pipe()    //理解程序运行管道

使用实例
const gulp = require('gulp');  //引入一个gulp函数库
gulp.task('hello',function(){
    
           //建立任务
    gulp.src("./src/css/base.css")    //获取要处理的文件
    .pipe(gulp.dest("./dist/css"));   //放入指定文件夹
})

gulp use monitor

gulp.task("watch",function(){
    
    
  gulp.watch()  
//第一个参数：文件监听的路径；    第二个参数：要执行的任务
})

gulp usa plugins

Site: plugin gulp

Etapas para uso:

<1> Baixe o plug-in para o local

cnpm install 插件名 --save-dev

<2> Introduzir arquivos por meio de require ()

<3> Verifique o uso e uso do plug-in

Compressão html (gulp-htmlmin)

CSS compactado (gulp-csso)

Renomear plugin (gulp-rename)

Processando plugin de arquivo js

arquivos de mesclagem gulp-conact
gulp-uglify compacta arquivos js
gulp-babel ES6 => conversão de sintaxe ES5

Incluir arquivo público (gulp-file-include)

Inicie o servidor (gulp-connect)

const connect=require("gulp-connect");
gulp.task("server",function(){
    
    
  connect.server({
    
    
      root:"dist",  //设置根目录
      port:8000,
      //livereload:true  //启动实时刷新
  })
})

arquivo package.json

Dependências do projeto:

Na fase de desenvolvimento e na fase de operação online do projeto, são necessários pacotes de terceiros.

Os arquivos baixados usando o comando npm install package name serão adicionados ao campo dependencies do arquivo package.json por padrão.

Use npm i --production durante a reinstalação para baixar apenas as dependências do projeto.

Dependência de desenvolvimento:

Pacotes de terceiros que precisam ser considerados durante a fase de desenvolvimento do projeto e não são necessários durante a fase de operação online.

Use o comando npm install package name --save-dev para adicionar o pacote ao campo devDependencies do arquivo package.json.

Usar o npm install fará o download novamente de todas as dependências.

package-lock.json

Usado para registrar dependências complexas entre módulos.

Bloqueie a versão do pacote para garantir que não haverá problemas ao baixar novamente devido a diferentes versões do pacote.
Acelere a velocidade de download, pois a estrutura em árvore do pacote de terceiros do qual depende o projeto e o endereço de download do pacote foram registrados no arquivo. Você só precisa fazer o download durante a reinstalação.

Um exemplo do meu arquivo gulpfile.js

//注意node和gulp版本，版本冲突可能会发生错误，我使用的是3.9.1版本gulp和10.22.0版本node
const gulp=require('gulp');
const htmlmin=require('gulp-htmlmin');
const fileinclude=require('gulp-file-include');
const rename=require('gulp-rename');
const sass = require('gulp-sass');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const imgmin=require('gulp-imagemin');
const connect = require('gulp-connect');

//报错处理函数
function showError(error) {
    
    
    console.log(error.toString());
    this.emit('end');
}
//html文件压缩
gulp.task("htmlmin",function(){
    
    
    gulp.src("src/*.html")
    .pipe(fileinclude())
    .on('error', showError)
    .pipe(htmlmin({
    
     collapseWhitespace: true }))
    .on('error', showError)
    .pipe(gulp.dest("./dist"));
})
//css代码压缩
gulp.task("cssmin",function(){
    
    
    return gulp.src(["src/css/*.scss","src/css/*.css"])
    .pipe(sass())
    .on('error', showError)
    .pipe(csso())
    .on('error', showError)
/*     .pipe(rename({
        suffix:".min"
    })) */
    .pipe(gulp.dest("./dist/css"));
})
//js语法转换及代码压缩
gulp.task('jsmin', function ()  {
    
    
    return gulp.src('./src/js/*.js')
        .pipe(babel({
    
    
            //可以判断当前代码运行环境并将代码转化为当前运行环境支持的代码
            presets: ['@babel/env']
        }))
        .on('error', showError)
        .pipe(uglify())
        .on('error', showError)
/*         .pipe(rename({
            suffix:".min"
        })) */
        .pipe(gulp.dest('./dist/js'));

})
gulp.task('jsmin-module', function ()  {
    
    
    return gulp.src('./src/js/modules/*.js')
        .pipe(babel({
    
    
            //可以判断当前代码运行环境并将代码转化为当前运行环境支持的代码
            presets: ['@babel/env']
        }))
        .on('error', showError)
        .pipe(uglify())
        .on('error', showError)
/*         .pipe(rename({
            suffix:".min"
        })) */
        .pipe(gulp.dest('./dist/js/modules'));
})
//图片拷贝处理
gulp.task("images", function(){
    
    
    gulp.src('./src/img/*')
        //.pipe(imgmin())
        .pipe(gulp.dest("./dist/img"));
})
//服务器任务
gulp.task("server", function ()  {
    
    
    connect.server({
    
    
        root: "./dist/",
        port: 5500,
        livereload: true
    })
})
//监听任务
gulp.task("watch", function() {
    
    
    gulp.watch("./src/*.html", ["htmlmin"]);
    gulp.watch("./src/common/*.html", ["htmlmin"]);
    gulp.watch("./src/css/*.css",["cssmin"]);
    gulp.watch("./src/css/*.scss",["cssmin"]);
    gulp.watch("./src/js/*.js",["jsmin"]);
    gulp.watch("./src/js/modules/*.js",["jsmin-module"]);
    gulp.watch("./src/img/*", ["images"]);
})
gulp.task("build",['htmlmin','cssmin','jsmin','jsmin-module','images','server',"watch"])