美文网首页
Gulp 使用方法(教程一)

Gulp 使用方法(教程一)

作者: hankchang | 来源:发表于2018-08-11 02:48 被阅读0次

    Gulp 官网

    目录

    1. Gulp 环境
    2. Gulp 环境
    3. 初始化目录结构
    4. 安装 gulp
    5. gulp 的简单使用
    6. 使用 pug 模板引擎
    7. 使用 Sass
    8. 监控 sass
    9. 合并任务 并监控 pug 添加 gulp-plumber(防止报错终止监控)
    10. Postcss 优化 css autoprefixer 自动补充兼容前缀
    11. 加强 gulp 监控能力

    相关阅读

    Gulp 环境

    依赖 Node.js

    初始化目录结构

    创建并打开 gulp-learning 目录

    • mkdir gulp-learning
    • cd gulp-learning

    初始化 npm

    • npm init -y

    安装 gulp

    全局安装 gulp-cli

    • npm install gulp-cli -g
    • 如果安装慢可以使用 淘宝镜像
    • 例如 npm install gulp-cli -g --registry=https://registry.npm.taobao.org

    安装 gulp (开发环境)

    • npm install gulp -D

    gulp 的简单使用

    1. 依照 文件树 初始化项目结构
      文件树
    .
├── assets
│   └── index.html
├── gulpfile.js
├── package-lock.json
└── package.json

    assets/index.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>

</body>
</html>

    gulpfile.js

    const gulp = require("gulp"); // 引入 gulp

// task 指定一个任务名称
gulp.task("copyHtml", () => {
  return (
    gulp
      // 来源 文件|文件夹
      .src("./assets/**/*.html")
      // dest 输出路径
      .pipe(gulp.dest("./dist/"))
  );
});
    1. 运行 gulp copyHtml

    终端输出 如下

    [02:16:00] Using gulpfile ~/Desktop/gulp-learning/gulpfile.js
[02:16:00] Starting 'copyHtml'...
[02:16:00] Finished 'copyHtml' after 29 ms

    文件树

    • 生成 dist/index.html
    .
├── assets
│   └── index.html
├── dist
│   └── index.html
├── gulpfile.js
├── package-lock.json
└── package.json

    至此 gulp 简易 无实际意义的使用完成

    • gulp 60%~70% 的功能都使用了(没错,gulp 就这么一点功能,功能单一,剩下的都是扩展.)
    gulp
  // 来源
  .src()
  // 编译
  .pipe(babel())
  // 合并
  .pipe(concat())
  // 压缩
  .pipe(ugify())
  // 输出
  .pipe(gulp.dest());

    使用 pug 模板引擎

    安装 gulp-pug

    • npm i gulp-pug -D
    1. 依照 文件树 创建文件
    .
├── assets
│   └── index.pug
├── gulpfile.js
├── package-lock.json
└── package.json

    assets/index.pug

    <!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
  body
    br
    | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sequi dolor consequatur, iure alias voluptatem, praesentium tempora nesciunt, minus iusto maxime nam qui. Facere explicabo, optio iure expedita repellat in!

    gulpfile.js

    const gulp = require("gulp");
const pug = require("gulp-pug"); // 引入依赖

gulp.task("pug", () => {
  return gulp
    .src("./assets/**/*.pug")
    .pipe(
      pug({
        // pretty: true // 编译后是否格式化显示
      })
    )
    .pipe(gulp.dest("./dist/"));
});
    1. 运行 gulp pug 
    [02:43:27] Using gulpfile ~/Desktop/gulp-learning/gulpfile.js
[02:43:27] Starting 'pug'...
[02:43:27] Finished 'pug' after 128 ms

    文件树

    .
├── assets
│   └── index.pug
├── dist
│   └── index.html
├── gulpfile.js
├── package-lock.json
└── package.json
    1. 打开 dist/index.html

    好了,到这里 已经编译成功了, 试着打开 pretty 配置 重新编译一遍

    使用 Sass

    安装 gulp-sass

    • npm i sass -D
    1. 依照 文件树 创建文件
    .
├── assets
│   ├── index.pug
│   └── scss
│       └── all.scss
├── gulpfile.js
├── package-lock.json
└── package.json

    这里 我每次演示完都手动删除 dist 文件夹 这些操作可有可无, 就是看起来比较干净

    assets/scss/all.scss

    $color_red: red;

body {
  color: $color_red;
}

    gulpfile.js

    const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require("gulp-sass"); // 引入依赖

gulp.task("pug", () => {
  return gulp
    .src("./assets/**/*.pug")
    .pipe(
      pug({
        pretty: true
      })
    )
    .pipe(gulp.dest("./dist/"));
});

gulp.task("sass", function() {
  return gulp
    .src("./assets/scss/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./dist/css"));
});
    1. 运行 gulp sass 
    [03:02:34] Using gulpfile ~/Desktop/gulp-learning/gulpfile.js
[03:02:34] Starting 'sass'...
[03:02:34] Finished 'sass' after 36 ms

    文件树

    .
├── assets
│   ├── index.pug
│   └── scss
│       └── all.scss
├── dist
│   └── css
│       └── all.css
├── gulpfile.js
├── package-lock.json
└── package.json

    打开 dist/css/all.css 查看编译后的代码

    监控 sass

    每次修改完文件都要自己手动执行 gulp 实在是麻烦,所以要加上 监控

    1. 直接在 gulpfile.js 添加代码
    // 在末尾添加
gulp.task("watch", () => {
  // 监控所有以 scss 结尾的文件, 发生变动 执行 sass 任务(等同于在命令行执行 gulp sass)
  gulp.watch("./assets/scss/**/*.scss", ["sass"]);
});
    1. 运行 gulp watch
    • 现在终端在持续监控 assets/scss/ 文件夹
    • 修改 assets/scss/all.scss 
    $color_red: #ff0;

body {
  color: $color_red;
}
    • 查看 dist/css/all.css 已经修改完成了
    1. 退出监控 Ctrl + C

    合并任务 并监控 pug 添加 gulp-plumber(防止报错终止监控)

    1. 合并任务 并监控 pug

    gulpfile.js

    const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require("gulp-sass");

gulp.task("pug", () => {
  return gulp
    .src("./assets/**/*.pug")
    .pipe(
      pug({
        pretty: true
      })
    )
    .pipe(gulp.dest("./dist/"));
});

gulp.task("sass", () => {
  return gulp
    .src("./assets/scss/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./dist/css"));
});

gulp.task("watch", () => {
  gulp.watch("./assets/scss/**/*.scss", ["sass"]);
  // 添加监视
  gulp.watch("./assets/**/*.pug", ["pug"]);
});

// 多任务合并, 使用数组
gulp.task("default", ["pug", "sass", "watch"]);
    1. 添加 gulp-plumber(防止报错终止监控)

    安装 gulp-plumber

    • npm i -D gulp-plumber

    gulpfile.js

    const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber"); // 引入依赖

gulp.task("pug", () => {
  return (
    gulp
      .src("./assets/**/*.pug")
      // 在每个读取文件后面加入 plumber
      .pipe(plumber())
      .pipe(
        pug({
          pretty: true
        })
      )
      .pipe(gulp.dest("./dist/"))
  );
});

gulp.task("sass", () => {
  return (
    gulp
      .src("./assets/scss/**/*.scss")
      // 在每个读取文件后面加入 plumber
      .pipe(plumber())
      .pipe(sass().on("error", sass.logError))
      .pipe(gulp.dest("./dist/css"))
  );
});

gulp.task("watch", () => {
  gulp.watch("./assets/scss/**/*.scss", ["sass"]);
  gulp.watch("./assets/**/*.pug", ["pug"]);
});

gulp.task("default", ["pug", "sass", "watch"]);
    1. 运行 gulp

    gulp 命令后面不加参数 就是默认的执行 default

    现在可以 修改 ./assets/index.pug 或者 ./assets/scss/all.scss 测试效果

    Postcss 优化 css autoprefixer 自动补充兼容前缀

    安装 gulp-postcss
    安装 autoprefixer

    • npm i -D gulp-postcss autoprefixer
    1. 修改配置文件

    gulpfile.js

    const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss"); // 引入依赖
const autoprefixer = require("autoprefixer"); // 引入依赖

gulp.task("pug", () => {
  return gulp
    .src("./assets/**/*.pug")
    .pipe(plumber())
    .pipe(
      pug({
        pretty: true
      })
    )
    .pipe(gulp.dest("./dist/"));
});

gulp.task("sass", () => {
  // Postcss 配置
  // autoprefixer "last 1 version" (浏览器最后一个版本, 最新版本) 这里我使用 倒数第二个版本
  const plugins = [autoprefixer({ browsers: ["last 3 version"] })];

  return (
    gulp
      .src("./assets/scss/**/*.scss")
      .pipe(plumber())
      .pipe(sass().on("error", sass.logError))
      // 这里 已经编译完成 css
      // Postcss 可以插入大量插件 autoprefixer 只是其中一个
      .pipe(postcss(plugins))
      .pipe(gulp.dest("./dist/css"))
  );
});

gulp.task("watch", () => {
  gulp.watch("./assets/scss/**/*.scss", ["sass"]);
  gulp.watch("./assets/**/*.pug", ["pug"]);
});

gulp.task("default", ["pug", "sass", "watch"]);
    1. 运行 gulp
    • 每次修改 gulpfile.js 需要 重启 gulp
    • 自己 测试 "last 3 version", "last 4 version" 等版本区别
    • autoprefixer 配置项browserslist 链接
    • 可以在 assets/scss/all.scss 使用 transform: rotate(120deg) 测试
    • 打开 dist/css/all.css
    • -webkit -ms 等前缀 多测试几个版本,看需求选择 例如: "last 1 version" -ms 前缀已经没有了,IE 都支持了(斜眼笑)

    加强 gulp 监控能力

    目前版本的 Watch 並无法监控到 "新增” 及 “刪除” 的文档变动

    所以是新增的文档下，是必须重启 gulp 服务才能继续监控

    或者是使用另一个 gulp-watch 插件

    1. 安装 gulp-watch
    • npm i -D gulp-watch
    1. 修改配置文件

    gulpfile.js

    const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const watch = require("gulp-watch");

gulp.task("pug", () => {
  return (
    gulp
      .src("./assets/**/*.pug")
      // 添加监视
      .pipe(watch("./assets/**/*.pug"))
      .pipe(plumber())
      .pipe(
        pug({
          pretty: true
        })
      )
      .pipe(gulp.dest("./dist/"))
  );
});

gulp.task("sass", () => {
  const plugins = [
    autoprefixer({
      browsers: ["last 1 version"]
    })
  ];

  return (
    gulp
      .src("./assets/scss/**/*.scss")
      // 添加监视
      .pipe(watch("./assets/scss/**/*.scss"))
      .pipe(plumber())
      .pipe(sass().on("error", sass.logError))
      .pipe(postcss(plugins))
      .pipe(gulp.dest("./dist/css"))
  );
});

// 删除 之前的监视任务

gulp.task("default", ["pug", "sass"]);
    1. 运行 gulp

    相关文章

      网友评论

          本文标题：Gulp 使用方法(教程一)

          本文链接：https://www.haomeiwen.com/subject/vvsrbftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Gulp 使用方法(教程一)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！