关于gulp的那些事

其他 2019-04-09 16:51:50 阅读次数: 0

专业名词

B2B2C

B2B2C是一种电子商务类型的网络购物商业模式，B是BUSINESS的简称，C是CUSTOMER的简称，第一个B指的是商品或服务的供应商，第二个B指的是从事电子商务的企业，C则是表示消费者

前后端分离模式

1551835663390

node作用

  • node一门后台语言可以查询数据库 充当接口来使用 以前的使用方式
  • 在前后端分离模式里面，node充当了另外一种角色 自动化构建工具

自动化构建工具

node 来充当自动化构建工具 工具构建好了说明 框架就搭建好了。

想使用一行命令 来自动完成 以下的所有功能

作用

  • 压缩代码
  • 把es6语法 => es5
  • sass 或者less => css
  • ,…

思考

开发项目的时候所写的代码：

  1. 加上人可以看懂的注释
  2. 变量命名 尽量有语义化
  3. html结构的时候 尽量 规整 。。

把这套代码 上线了 运行：

  1. 网站的代码 有很容易看懂的注释？？ 不希望有注释 安全性 体积
  2. money => o

有哪些自动化构建工具

这些自动化构建工具 底层 都是通过 node 来实现。

  • gulp

  • grunt 最老 的先驱。。基本很少用了

  • webpack

    扫描二维码关注公众号，回复： 5825829 查看本文章

gulp

概念

gulp 基于nodejs 一个框架 或者 一个库 或者一个平台 ，自动化构建工具的作用

gulp该如何学习

  1. 掌握gulp核心语法
  2. 掌握基于gulp一些常见插件的使用 （不要背代码，而是会复制 和修改就可以了。）

官网

英文官网-最权威

中文网

1551836488643

gulp的使用前的准备

  1. gulp是基于nodejs 先安装node

    1551836630901

  2. 要全局安装gulp 一辈子就装一次。。。

    如果网络太慢，切换成 淘宝镜像 cnpm

    npm i gulp -g

    1551836705961

  3. 需要在你的node项目中 再进行局部安装

    npm i gulp -D

gulp的初体验

  1. 在你项目的根目录 新建一个文件 gulpfile.js

  2. 在该文件中直接复制以下代码

    // 1 引入gulp的核心包
const gulp=require("gulp");

// 2 编写gulp函数 = 任务
// gulp.task(任务名称，任务的执行逻辑)
gulp.task("hello",()=>{
  console.log("hello gulp任务被执行了");
});

  3. 在命令行中执行任务

    当 文件名叫做 gulpfile.js 可以被省略

    当任务名称 叫做 default 可以被省略

    #  gulp -f 要执行的gulpjs文件 任务名称
gulp -f gulpfile.js hello

# 最简洁执行任务的命令
gulp  =====  gulp -f gulpfile.js defalut 
gulp -f gulpfile.js

gulp任务没有完成的处理方式

1551839665538

提示信息：

hello 这个任务没有完成

你是不是忘记 加一些设置 来告诉 gulp 说 任务已经完成

通过 手动条用 done函数的方式解决

gulp.task("hello",(done)=>{
  console.log("hello gulp任务被执行了");
  // 来告诉gulp 任务已经完成
  // done 结束的信号
  done();
});

返回一个 promise对象来解决 了解中的了解 --看不懂

gulp.task("hello", () => {
  return new Promise((resolve, reject) => {
    console.log("hello gulp任务被执行了");
    resolve();
  });
});

返回gulp文件流的方式 常见

gulp.task("copy",()=>{
  // 获取要操作的源文件
 return gulp.src("src/index.html")
  // 管道 人家定的语法 
  .pipe(gulp.dest("dist/"));
})

gulp的核心语法

gulp.task 定义任务

// gulp.task(任务名称，任务的执行逻辑)
gulp.task("hello",()=>{
  console.log("hello gulp任务被执行了");
});

gulp.src 和gulp.dest

src获取要操作的文件 src获取的文件支持数组的形式 gulp.src(["index.html","login.html"]) 还支持正则的语法

​ gulp.src("*.html")

dest 把文件存放到哪里去

// 3 编写 复制的任务 
gulp.task("copy",()=>{
  // 3.1 获取要操作的文件
 return gulp.src("./src/index.html")
  // pipe 管道 加工厂
  .pipe(gulp.dest("./dist/"));
})

series(…tasks)

让gulp任务 按顺序执行，想按循序 执行 1，2，3，4个任务必须要借助这个api的功能。

代码

// 4 编写按顺序执行的任务
// 4.1 打印 字符串 1
gulp.task("t1",(done)=>{
  console.log("任务 1 ");
  done();
});
// 4.2 打印 字符串 2
gulp.task("t2",(done)=>{
  console.log("任务 2 ");
  done();
});
// 4.3 打印 字符串 3
gulp.task("t3",(done)=>{
  console.log("任务 3 ");
  done();
});
// 4.4 打印 字符串 4
gulp.task("t4",(done)=>{
  console.log("任务 4 ");
  done();
});

// 4.5 编写一个入口的任务
// series(["任务1","任务2"])
gulp.task("default",gulp.series(["t1","t2","t3","t4"]));

watch

可以实现监控文件的改动，从而去触发其他的任务的执行

// 5.1 编写监控文件的任务
gulp.task("watch",()=>{
  // 5.2 监控文件
  gulp.watch("src/index.html",gulp.series("time"));
});
// 5.3  编写文件改动的之后的执行逻辑的  任务  
gulp.task("time",(done)=>{
  console.log(Date.now());
  done();
});

gulp的常见插件

希望利用这一些常见的插件来实现一些功能

  1. 删除功能
  2. 编译sass文件或者 less 或者 stylues css文件
  3. 对css文件添加对应的浏览器前缀
  4. 压缩 js 压缩css 。。
  5. es6 => es5 …
  6. 就去对应的插件来实现。。。。

插件网站1

插件网站2

del

实现删除功能

安装

npm install del -D

编写代码

// 1 引入gulp 核心包
const gulp=require("gulp");
// 2 引入 删除 del 包
const del = require('del');

// 3 编写 删除任务
gulp.task("delete",()=>{
  // 3.1 执行删除
  // del(["要删除的文件的路径"])
 return del(["./dist"]);
});

运行

gulp -f 01-gulpfile-del.js delete

gulp-less

less语法小体验

# $color:red; sass 

@color:red; less

安装

npm install gulp-less -D

编写任务

const gulp = require("gulp");
// 1 引入编译less文件的包
const less = require("gulp-less");

// 2 编写  编译less文件的任务
gulp.task("css", () => {
  // 2.1 获取 要操作的less文件
  return (
    gulp
      .src("./src/css/*.less")
      //  2.2 使用less插件 编译文件
      .pipe(less())
      .pipe(gulp.dest("./dist/css/"))
  );
});

执行任务

gulp -f 02-gulpfile-less css

gulp-autoprefixer

可以实现自动帮们给css文件添加对应的浏览器兼容性前缀

安装

npm install --save-dev gulp-autoprefixer

编写任务

const gulp=require("gulp");
const less = require("gulp-less");
// 1 引入 添加css浏览器前缀的插件
const autoprefixer=require("gulp-autoprefixer");


// 2 编写  编译less文件的任务
gulp.task("css", () => {
  return (
    gulp
      .src("./src/css/*.less")
      .pipe(less())
      // 2.1 使用添加浏览器前缀的插件
      .pipe(
        autoprefixer({
          // 兼容 主流浏览器的最新的个版本 
          browsers: ["last 2 versions"]
        })
      )
      .pipe(gulp.dest("./dist/css/"))
  );
});

执行

gulp -f 03-gulpfile-gulpAutoprefixer.js css

gulp-sourcemaps

可以帮我们生成对应的样式文件的map文件 方便我们去调试代码

安装

npm i gulp-sourcemaps -D

编写代码

const gulp=require("gulp");
const less = require("gulp-less");
const autoprefixer=require("gulp-autoprefixer");
// 01- 引入 生成map文件的 插件
const sourcemaps = require('gulp-sourcemaps');

// 02 处理css
gulp.task("css", () => {
  return (
    gulp
      .src("./src/css/*.less")
      // 2.1 在生成css文件之前 先记录以下 less文件的样子
      .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      // 2.2 和css文件同层级 也顺带生成一个 map文件
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("./ist/css/"))
  );
});

执行

gulp -f 04-gulpfile-map.js css

gulp-babel

负责将 es6 编译成对应 es5插件

es6 变成es5

es7 变成 es6

es8变成 es7

es9 变成es8 7 6 …

babel很有远见，发现后期过了几年，可能会有其他不同的编译的需求，那么就定下一个规则 要由哪个版本编译成哪个版本 必须通过配置的方式 来使用 否则 无效

babel很有远见，发现后期过了几年，可能会有其他不同的编译的需求，那么就定下一个规则 要由哪个版本编译成哪个版本 必须通过配置的方式 来使用 否则 无效

安装

npm i gulp-babel @babel/core @babel/preset-env -D

编写任务

window.onload = function () {
  show("hello");

  function show(p1) {
    setTimeout(() => {
      let num = 100;
      console.log(`数组 ==== ${num}  ${p1}`);
    }, 1000);
    console.log(p1);
  }
};

添加babel独有的配置文件

  1. 在根目录下新建文件，名为 .babelrc

  2. 添加以下配置

    {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 years"]
      }
    }]
  ]
}

执行

gulp -f 05-gulpfile-es6.js js

gulp-uglify

丑化 混淆

let num =100;

let o=100;

安装

npm install --save-dev gulp-uglify

编写代码

const gulp=require("gulp");
const babel = require("gulp-babel");
// 1.0 引入 混淆 丑化插件
const uglify=require("gulp-uglify");

gulp.task("js",()=>{
  return  gulp.src("./src/js/*.js")
  .pipe(babel())
  // 2.0 开始丑化 js
  .pipe(uglify(
    // 旧版本这个插件 要手动的调用以下的参数 才是最丑，而新版本 的直接 默认就是最丑！！！
    {
      // 3.1 丑化的等级
      mangle: {
        // 3.1.1 最高级
        toplevel: true
      }
    }
  ))
  .pipe(gulp.dest("./dist/js/"));
});

执行

 gulp -f .\06-gulpfile-uglify.js js

安装

npm i gulp-babel @babel/core @babel/preset-env -D

编写任务

window.onload = function () {
  show("hello");

  function show(p1) {
    setTimeout(() => {
      let num = 100;
      console.log(`数组 ==== ${num}  ${p1}`);
    }, 1000);
    console.log(p1);
  }
};

添加babel独有的配置文件

  1. 在根目录下新建文件，名为 .babelrc

  2. 添加以下配置

    {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 years"]
      }
    }]
  ]
}

执行

gulp -f 05-gulpfile-es6.js js

gulp-file-include

文件合并，html标签文件合并 标签的组件化的功能

安装

npm install gulp-file-include -D

编写代码

1552010041489

  1. 新建一个组件文件夹 components 在里面再新建一个组件文件 header.html

    <header>公共的头部</header>

  2. index.html 引用 刚才header.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  @@include("header.html") 
</body>
</html>

  3. 编写对应的gulp任务

    const gulp=require("gulp");
// 1 引入 html文件合并的包
const fileInclude=require("gulp-file-include");

// 2 编写 处理 html的任务
gulp.task("html",()=>{
  return gulp
  // 2 获取页面文件
    .src("src/index.html")
    .pipe(
      fileInclude({
        // 2.1 定义 fileInclude 规定的暗号
        prefix: "@@",
        // 2.2 定义的是 组件的路径 
        basepath: "src/components/",
        // 2.3 可以传入一个变量
        // context: {
        //   title: "我们的页面"
        // }
      })
    )
    .pipe(gulp.dest("dist/"));
});

执行

gulp -f 07-gulpfile-fileInclude.js html

browser-sync

  1. 可以实现 通过命令行来自动打开浏览器
  2. 本地文件的改变之后，浏览器自动刷新

安装

npm install browser-sync -D

编写代码

const gulp = require("gulp");
// 1.0 引入 浏览器同步 插件
const browserSync = require("browser-sync");
const fileInclude=require("gulp-file-include");

gulp.task("html",()=>{
  return gulp
    .src("src/index.html")
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    .pipe(gulp.dest("dist/"));
});


// 2 自动打开浏览器  监听页面改变 刷新浏览器
gulp.task("autopage", () => {
  // 2.1 使用插件 配置网站路径和 端口号
  browserSync({ 
    // 2.1.1 配置服务器信息
    server:{
      // 2.1.1 配置打开 html的路径 一定是 dist文件夹里面 
      baseDir:"./dist/"
    },
    // 2.2 定义端口号
    port:9999
  });

  // 2.2 文件改变之后 才刷新页面  
  gulp.watch(["src/*.html","src/components/*.html"],gulp.series(["html","reload"]));
});


gulp.task("reload",(done)=>{
  // 开始刷新页面
  browserSync.reload();
  done();
});

// 2 定义默认任务
gulp.task("default",gulp.series(["html","autopage"]));

gulp-rev 和 gulp-rev-collector

静态资源的指纹功能

  1. 浏览器有时候会缓存一些 同名的 静态资源

  2. 如何才可以 不让浏览器使用缓存资源

    每一个版本 都改一下 静态资源的名字 浏览器发现静态资源名字都不一样，肯定就不会做缓存

插件的作用

  1. gulp-rev 负责给静态文件添加指纹
  2. gulp-rev-collector 负责讲html文件中的静态资源的链接 改成 带有指纹的链接

1552016520180

安装

npm install --save-dev gulp-rev gulp-rev-collector

编写代码

const gulp=require("gulp");
const less = require("gulp-less");
const autoprefixer=require("gulp-autoprefixer");
const fileInclude=require("gulp-file-include");
// 1 引入添加指纹的 插件
const rev=require("gulp-rev");
// 1 引入 修改html文件中的静态资源的插件
const revCollector=require("gulp-rev-collector");


// 2 给样式文件添加指纹
gulp.task("css", () => {
  return gulp
      .src("./src/css/*.less")
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      // 2 给静态资源添加指纹
      .pipe(rev())
      .pipe(gulp.dest("./dist/css/"))
      // 3 生成 字典文件
      .pipe(rev.manifest({
        path:"rev-css.json"
      }))
      // 4 把这个字典文件存放到哪里去
      .pipe(gulp.dest("./rev/"));
  
});


// 3 处理html文件 
gulp.task("html",()=>{
  return gulp
    .src(["src/index.html","./rev/*.json"])
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    // 3.1 使用插件来替换静态资源
    .pipe(revCollector())
    .pipe(gulp.dest("dist/"));
});


gulp.task("default",gulp.series(["css","html"]));

执行

 gulp -f 09-gulpfile-rev.js  default

开发环境和生产环境

开发环境要的功能

gulp_dev.js

gulp_dev.md

  1. 先删除旧的文件

  2. 要编译less文件

  3. 要给css添加对应的浏览器前缀

  4. 要生成样式文件的同时也顺便生成map文件，js文件也是有map文件

    js的map文件可以直接在谷歌浏览器里面将代码映射回到es6的源代码中

  5. 将es6的语法编译成 es5语法

  6. 不要丑化或者混淆就是代码

  7. 要实现标签文件的组件化功能

  8. 要实现自动打开浏览器和自动根据文件的改变去刷新浏览器

  9. 不要添加静态资源指纹的功能

  10. 复制第三方的插件资源到 dist目录下

生产环境

gulp_pro.js

  1. 先删除旧的文件
  2. 要编译less文件
  3. 要给css添加对应的浏览器前缀
  4. 将es6的语法编译成 es5语法
  5. 要丑化或者混淆就是代码
  6. 要实现标签文件的组件化功能
  7. 要添加静态资源指纹的功能
  8. 复制第三方的插件资源到 dist目录下

其他知识

快捷在运行的命令的方式

  1. 在package.json 中的 scripts 属性中 进行编辑

      "scripts": {
    "dev": "gulp -f gulp_dev.js default ",
    "pro": "gulp -f gulp_pro.js default "
  }

  2. 在对应的命令行中 输入 命令 npm run dev === gulp -f gulp_dev.js default

gulp-dev

/* 开发环境做的事 */
console.log("======开发环境做的事======");
// 1. 先删除旧的文件 del
// 2. 要编译less文件  gulp-less
// 3. 要给css添加对应的浏览器前缀  gulp-autoprefixer
// 4. 要生成样式文件的同时也顺便生成map文件，js文件也是有map文件  gulp-sourcemaps
// 5. 将es6的语法编译成 es5语法 gulp-babel
// 7. 要实现标签文件的组件化功能 gulp-file-include
// 8. 要实现自动打开浏览器和自动根据文件的改变去刷新浏览器 browser-sync
// 10. 复制第三方的插件资源到 dist目录下   gulp.src  gulp.dest

// 1 引入插件
const gulp = require("gulp");
const del = require("del");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const babel = require("gulp-babel");
const fileInclude = require("gulp-file-include");
const browserSync = require("browser-sync");

// 2 删除 任务
gulp.task("del", () => {
  return del(["./dist"]);
});

// 3 处理css 任务
gulp.task("css", () => {
  return (
    gulp
      .src("./src/css/*.less")
      // 2.1 在生成css文件之前 先记录以下 less文件的样子
      .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      // 2.2 和css文件同层级 也顺带生成一个 map文件
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("./dist/css/"))
  );
});

// 4 处理js
gulp.task("js",()=>{
  return  gulp.src("./src/js/*.js")
  // 4.1 在转换成es5之前 先记录以下 es6代码的样子
  .pipe(sourcemaps.init())
  .pipe(babel())
  // 4.2 和生成的js同层级也生成 map文件 
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("./dist/js/"));
});

// 5 处理html 任务
gulp.task("html",()=>{
  return gulp
    .src("src/index.html")
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    .pipe(gulp.dest("dist/"));
});

// 5.5 执行 负责第三方插件 任务
gulp.task("lib",()=>{
  return  gulp.src("./src/lib/**")
  .pipe(gulp.dest("./dist/lib/"));
});

// 6 自动打开浏览器 和 监听文件的改变 刷新浏览器
gulp.task("autopage", () => {

  browserSync({ 
    server:{
      baseDir:"./dist/"
    },
    port:9999
  });
  // 监听html文件的改变 从而重新执行 html 任务   刷新浏览器
  gulp.watch(["src/*.html","src/components/*.html"],gulp.series(["html","reload"]));
  // 监听 less文件， 重新执行 css 任务  刷新浏览器
  gulp.watch(["src/css/*.less"],gulp.series(["css","reload"]));
    // 监听 js文件， 重新执行 js 任务  刷新浏览器
  gulp.watch(["src/js/*.js"],gulp.series(["js","reload"]));
  
});

gulp.task("reload",(done)=>{
  browserSync.reload();
  done();
});

// 0 定义默认任务
gulp.task("default", gulp.series(["del","css","js","html","lib","autopage"]));

gulp-pro

/* 生产环境做的事 */
console.log("======生产环境做的事======");
// 1. 先删除旧的文件 
// 2. 要编译less文件 
// 3. 要给css添加对应的浏览器前缀
// 3.5 压缩css代码 
// 4. 将es6的语法编译成 es5语法
// 5. 要丑化或者混淆就是代码
// 6. 要实现标签文件的组件化功能
// 7. 要添加静态资源指纹的功能 
// 8. 复制第三方的插件资源到 dist目录下 


const gulp = require("gulp");
const del = require("del");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require('gulp-cssmin');
const babel = require("gulp-babel");
const uglify=require("gulp-uglify");
const fileInclude = require("gulp-file-include");
const rev=require("gulp-rev");
const revCollector=require("gulp-rev-collector");

gulp.task("del", () => {
  return del(["./dist"]);
});

// 3 处理css 任务
gulp.task("css", () => {
  return gulp
      .src("./src/css/*.less")
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      .pipe(cssmin())
      .pipe(rev())
      .pipe(gulp.dest("./dist/css/"))
      .pipe(rev.manifest({
        path:"rev-css.json"
      }))
      .pipe(gulp.dest("./rev/"));
});

// 4 处理js
gulp.task("js",()=>{
  return  gulp.src("./src/js/*.js")
  .pipe(babel())
  .pipe(uglify( { mangle: { toplevel: true } } ))
  .pipe(rev())
  .pipe(gulp.dest("./dist/js/"))
  .pipe(rev.manifest({
    path:"rev-js.json"
  }))
  .pipe(gulp.dest("./rev/"));
});

// 5 处理html 任务
gulp.task("html",()=>{
  return gulp
  .src(["src/*.html","./rev/*.json"])
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    .pipe(revCollector())
    .pipe(gulp.dest("dist/"));
});

// 6 执行 负责第三方插件 任务
gulp.task("lib",()=>{
  return  gulp.src("./src/lib/**")
  .pipe(gulp.dest("./dist/lib/"));
});

gulp.task("default", gulp.series(["del","css","js","html","lib"]));

猜你喜欢

转载自blog.csdn.net/weixin_44504290/article/details/89150244
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022