Gulp 官网
目录
- Gulp 环境
- Gulp 环境
- 初始化目录结构
- 安装 gulp
- gulp 的简单使用
- 使用 pug 模板引擎
- 使用 Sass
- 监控 sass
- 合并任务 并监控 pug 添加 gulp-plumber(防止报错终止监控)
- Postcss 优化 css autoprefixer 自动补充兼容前缀
- 加强 gulp 监控能力
相关阅读
- Gulp 使用方法(教程一)
- Gulp 使用方法(教程二)
- Gulp 相关插件
- bower 简易教程
Gulp 环境
依赖 Node.js
- node 官网
- node 中文站
初始化目录结构
创建并打开 gulp-learning 目录
mkdir gulp-learningcd 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 的简单使用
- 依照 文件树 初始化项目结构
文件树
.
├── assets
│ └── index.html
├── gulpfile.js
├── package-lock.json
└── package.json
assets/index.html
Document
gulpfile.js
const gulp = require("gulp"); // 引入 gulp
// task 指定一个任务名称
gulp.task("copyHtml", () => {
return (
gulp
// 来源 文件|文件夹
.src("./assets/**/*.html")
// dest 输出路径
.pipe(gulp.dest("./dist/"))
);
});
- 运行
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
- 依照 文件树 创建文件
.
├── assets
│ └── index.pug
├── gulpfile.js
├── package-lock.json
└── package.json
assets/index.pug
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/"));
});
- 运行
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
- 打开 dist/index.html
好了,到这里 已经编译成功了, 试着打开 pretty 配置 重新编译一遍
使用 Sass
安装 gulp-sass
npm i sass -D
- 依照 文件树 创建文件
.
├── 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"));
});
- 运行
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 实在是麻烦,所以要加上 监控
- 直接在 gulpfile.js 添加代码
// 在末尾添加
gulp.task("watch", () => {
// 监控所有以 scss 结尾的文件, 发生变动 执行 sass 任务(等同于在命令行执行 gulp sass)
gulp.watch("./assets/scss/**/*.scss", ["sass"]);
});
- 运行
gulp watch
- 现在终端在持续监控 assets/scss/ 文件夹
- 修改 assets/scss/all.scss
$color_red: #ff0;
body {
color: $color_red;
}
- 查看 dist/css/all.css 已经修改完成了
- 退出监控
Ctrl + C
合并任务 并监控 pug 添加 gulp-plumber(防止报错终止监控)
- 合并任务 并监控 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"]);
- 添加 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"]);
- 运行
gulp
gulp 命令后面不加参数 就是默认的执行 default
现在可以 修改 ./assets/index.pug 或者 ./assets/scss/all.scss 测试效果
Postcss 优化 css autoprefixer 自动补充兼容前缀
安装 gulp-postcss
安装 autoprefixer
npm i -D gulp-postcss autoprefixer
- 修改配置文件
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"]);
- 运行
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 插件
- 安装 gulp-watch
npm i -D gulp-watch
- 修改配置文件
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"]);
- 运行
gulp