工具_gulp (几乎不用了)

1 简单介绍

1 描述: 
  1 基于Node.js流的前端自动化构建工具 (执行 Gulp需要 Node运行环境)
  2 gulp中文官网： https://www.gulpjs.com.cn/
  3 插件地址： https://gulpjs.com/plugins/

2 作用: 
  1 把我们的源文件, 整理压缩到 dist 文件夹中, 成为我们的项目文件, 然后把 dist 里面的文件扔给运维就可以了
  2 我们要记住不要忘了, 打包图片文件, 配置文件, 字体图标啊什么的这些, 注意 dist 文件放置的位置

2 安装

1 全局配置: 🔶
  1 gulp -v   //查看全局及本地, 是否安装 gulp
  2 npm rm gulp --global   //删除 gulp
  3 npm i gulp-cli -g   //全局安装

2 局部配置: 🔶
  1 npm init -y   //npm 配置文件
  2 npm i gulp -D   //局部 gulp
  3 根目录新建: gulpfile.js   //就是 gulp 工具的, 配置文件

3 执行 Gulp 配置文件 (命令行): 🔷
  1 gulp   //表示执行了, gulpfile.js 文件, Node执行的, 并不是浏览器
  2 gulp 任务名   //表示执行, gulpfile.js 文件中的单个任务

Gulp 常用 API

1 const gulp = require("gulp")

2 gulp.task 方法用来注册任务
--------------------------------------------------------------------------------------------
    //注册任务 --1
    gulp.task('hh', function() {
      console.log("zhang");
      done();   //告诉其他任务, 当前任务执行完成
    });
    //注册任务 --2    //官方标准
    function hh1() {
      console.log("wei");
      done();
    }
    exports.hh1 = hh1;
    //注册任务 --3
    gulp.task('hh2', async () =>{    //设置异步
      console.log("我也曾年少无知");
    });

    //注册默认任务 --4     //要用default 关键字
    gulp.task('default', async () =>{
      console.log("hello, 你个呆瓜");
    });
--------------------------------------------------------------------------------------------

2 gulp.src 创建一个流  //用来读取/引入文件, (可以吧文件拿出来, 放到别的地方)
--------------------------------------------------------------------------------------------
    gulp.src(a);    //参数: 文件匹配模式

    读取文件, 匹配规则
    *.js   //匹配某个目录下的所有的 JS文件
    **.js    //匹配当前目录和子目录的所有 JS文件

    gulp.src('./js/a.js');   // 读取JS目录下的一个文件
    gulp.src('./js/*.js');   // 读取js目录下的所有js文件
    gulp.src(['./js/a.js','./js/b.js']); // 读取两个匹配的文件

    gulp.src('./css/*.css')
    gulp.src('./css/**/*.css')  //匹配css目录及子目录下的所有 .css文件
--------------------------------------------------------------------------------------------.


3 gulp.dest 创建一个流    //把读取到的文件, 操作之后, 又写到我们的某个目录下面去
    gulp.dest("path");   //输出目录的路径

4 gulp.watch 监听globs   //指定文件在发生改变时, 运行这个监听任务

5 gulp.series()     //把多个任务组合在一起, 执行组合操作时, 所有任务将按顺序运行
    gulp.series('task1', 'task2', 'task3'...);
    
6 gulp.parallel()    //把多个任务组合在一起, 执行组合操作时, 所有任务将一起并行


代码展示
--------------------------------------------------------------------------------------------.
    const gulp = require("gulp");    //加载 gulp 模块
    const {task, src, dest, watch, series, parallel} = require('gulp');    //解构的方式获取, 常用API就不用 gulp.方法去使用了, 可直接使用了

    gulp.task('xx', async () =>{    //注册任务
      gulp.src('./css/*.css')       //读取文件
       .pipe(gulp.dest("./test"))     //放置文件 (把读取到的文件拷贝在指定目录下)
    });

    gulp.task('watch', async () => {      //当监听的文件发生变化时, 就执行 xx 任务  (就是我们之前拷贝的任务, 可以和编写的任务实时同步)
      gulp.watch('./css/*.css', gulp.series('xx'))     //路径可为: ["./css/*.css", "./js/*.js"..] --> 执行任务可为 ('xx', 'aa', 'bb'...)
    });

    1 gulp.task('default', async () =>{    //默认注册的任务
      console.log("我也曾年少无知");
    });
    2 task('default',series('db','watch'))   //默认任务, 执行其他任务
--------------------------------------------------------------------------------------------.

Gulp 常用插件

1 加载模块: 
--------------------------------------------------------------------------------------------
const {task, src, dest, watch, series, parallel} = require('gulp');    //加载模块
const concat = require("gulp-concat");     //1 先下载依赖包, 然后引入到 gulpfile.js  合并
const ug = require("gulp-uglify");    //2 注意要保证书写的 JS代码规范   JS压缩(切记要先转换)
const minc = require("gulp-minify-css");   //3 引入   CSS压缩
const bab = require("gulp-babel");    //4 转为ES5严格模式   ES6转ES5
const minh = require("gulp-minify-html");   //5 引入   HTML压缩
--------------------------------------------------------------------------------------------

2 基础使用: 
--------------------------------------------------------------------------------------------
1 文件合并 (JS CSS)      //1 安装: npm i gulp-concat -D
    task("cssx", async () =>{
      src('./css/*.css')
      .pipe(concat('x.css'))    //合并匹配到的 JS文件, 且命名为 x.css
      .pipe(dest('./dist/css'))    
    });


2 文件压缩 (JS)     //2 安装: npm i gulp-uglify -D
    task('jsxu',async ()=> {
      src('./js/*.js')   //获取 JS
      .pipe(concat('x.js'))   //合并 JS
      .pipe(ug())    //压缩 JS
      .pipe(dest("./dist/js"))  //输出 JS
    });    //合并&&压缩 JS


3 文件压缩 (CSS)     //3 安装: npm i gulp-minify-css -D
    task("cssx", async () =>{ 
      src('./css/*.css')
      .pipe(concat('x.css'))   //合并匹配到的 JS文件, 且命名为 x.css
      .pipe(minc())    //压缩的这个文件
      .pipe(dest('./dist/css'))    
    });


4 ES6/7.. 转 ES5 (JS)     // 4 安装: npm install --save-dev gulp-babel @babel/core @babel/preset-env
    task('jsxu',async ()=> {
      src('./js/*.js')   
      .pipe(concat('x.js'))   
      .pipe(bab({presets: ['@babel/preset-env']}))    //把 JS文件的ES6语法转为ES5, 参数固定这么写就可以了
      .pipe(ug())   //一定要转了之后再压缩
      .pipe(dest("./dist/js"))  
    });
    

5 文件压缩 (HTML)    // 5 安装: npm i gulp-minify-html -D
    task("h1", async ()=>{
      src('./*.html')
      .pipe(minh())
      .pipe(dest('./dist'))
      .pipe(lp.reload())   //执行刷新, 这个任务执行, 页面就自动执行一次刷新
    });


6 打包任务
    task('db', series('cssx', 'jsxu', 'h1'))   //执行 db 任务就会执行 后面这3个任务 ++ 默认任务
--------------------------------------------------------------------------------------------