Gulp 官网
目录
- load plugins 简化 gulp 载入流程
- Babel 编译你的 JS
- 使用 concat 把 babel 生成的 js 文件合并起来
- sourcemaps 追踪报错信息
- 到目前为止 babel 任务都是要手动执行编译的 让我们加上 watch 吧
- Gulp 与 Bower 结合使用
- 把 bower 生成的文件夹及文件合并到 dist 文件夹
- Bower 补充说明
- 网页开发不可或缺的 Webservice
- 优化,压缩你的代码
- 根据开发环境调整输出内容
- 整理你的文件(夹)
- 图片压缩
- 一键部署 GitHub Pages
- 在 pug 中传入数据
- 使用外部 sass 文件
- 合并来自 NPM 的 JS
相关阅读
- Gulp 使用方法(教程一)
- Gulp 使用方法(教程二)
- Gulp 相关插件
- bower 简易教程
load plugins 简化 gulp 载入流程
- 安装 gulp-load-plugins
npm install --save-dev gulp-load-plugins
- 修改配置文件
gulpfile.js
const gulp = require("gulp");
// gulp- 开头的依赖可以删除, gulp-load-plugins 会引入, 使用 $ 接收
// gulp- 开头的依赖 需要以 $.xxx 的形式使用
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
gulp.task("pug", () => {
return (
gulp
.src("./assets/**/*.pug")
// gulp- 开头的依赖 需要以 $.xxx 的形式使用
.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")
// gulp- 开头的依赖 需要以 $.xxx 的形式使用
.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"]);
Babel 编译你的 JS
- 安装 gulp-babel
npm install --save-dev gulp-babel babel-core babel-preset-env
- 依照 文件树 初始化项目结构
文件树
.
├── assets
│ ├── index.pug
│ ├── js
│ │ ├── all.js
│ │ └── all2.js
│ └── scss
│ └── all.scss
├── gulpfile.js
├── package-lock.json
└── package.json
gulpfile.js
const gulp = require("gulp");
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
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("babel", () => {
gulp
.src("./assets/js/**/*.js")
.pipe(
$.babel({
// 加入 babel, 注意$ 的使用, 忘记加 $ 等于没引入依赖.会报错
presets: ["env"]
})
)
.pipe(gulp.dest("./dist/js"));
});
gulp.task("default", ["pug", "sass", "babel"]); // 加入 babel 任务
assets/js/fn.js
const fn = () => console.log(1);
assets/js/fn2.js
const fn2 = () => console.log(2);
- 运行
gulp
文件树
.
├── assets
│ ├── index.pug
│ ├── js
│ │ ├── fn.js
│ │ └── fn2.js
│ └── scss
│ └── all.scss
├── dist
│ ├── css
│ │ └── all.css
│ ├── index.html
│ └── js
│ ├── fn.js
│ └── fn2.js
├── gulpfile.js
├── package-lock.json
└── package.json
- 生成 fn.js, fn2.js 两个文件
- babel 单纯就生成 对应的 js 文件
使用 concat 把 babel 生成的 js 文件合并起来
- 安装 gulp-concat
npm i -D gulp-concat
- 这一次需要 删除 dist/js 文件夹, 和修改配置文件
gulpfile.js
const gulp = require("gulp");
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
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("babel", () => {
gulp
.src("./assets/js/**/*.js")
.pipe(
$.babel({
presets: ["env"]
})
)
// 加入 concat 把 .src('./assets/js/**/*.js') 中引入的 js 文件都拼接到 all.js 文件中
.pipe($.concat("all.js"))
.pipe(gulp.dest("./dist/js"));
});
gulp.task("default", ["pug", "sass", "babel"]);
- 运行
gulp
文件树
.
├── assets
│ ├── index.pug
│ ├── js
│ │ ├── fn.js
│ │ └── fn2.js
│ └── scss
│ └── all.scss
├── dist
│ ├── css
│ │ └── all.css
│ ├── index.html
│ └── js
│ └── all.js
├── gulpfile.js
├── package-lock.json
└── package.json
- 只生成 all.js 一个文件
如果想要按照顺序拼接文件
gulp.task('scripts', function() {
return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
sourcemaps 追踪报错信息
安装 gulp-sourcemaps
先看看没有使用 sourcemaps 的状况
- 修改 assets/index.pug , assets/js/fn.js 文件
assets/index.pug
- 引入编译后的 all.js
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
script(src="./js/all.js")
body
br
p hello world
assets/js/fn.js
const fn = () => console.log(1);
fn();
assets/js/fn2.js
const fn2 = () => console.log(2);
fn2();
- 运行
gulp
- 在浏览器打开 dist/index.html
- 查看控制台
1 all.js:4
2 all.js:10
控制台打印出来的是编译后的结果, 当代码多的时候, 压缩后, 这样就会导致排错困难
- 使用 sourcemaps
gulpfile.js
const gulp = require("gulp");
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
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($.sourcemaps.init())
.pipe($.sass().on("error", $.sass.logError))
.pipe($.postcss(plugins))
// 在输出之前 写入 sourcemaps 文件
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/css"))
);
});
gulp.task("babel", () => {
gulp
.src("./assets/js/**/*.js")
// 初始化 sourcemaps
// 注意 $ 的使用 忘记加 $ 会报错
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
// 在输出之前 写入 sourcemaps 文件
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"));
});
gulp.task("default", ["views", "sass", "babel"]);
assets/index.pug
- 引入编译后的 css
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
link(rel="stylesheet" href="./css/all.css")
script(src="./js/all.js")
body
br
p hello world
- 运行
gulp
在浏览器打开 dist/index.html
开发者工具 查看 element style 样式表
body { all.scss:3
color: red;
}
- 查看控制台
1 fn.js:1
2 fn2.js:1
文件树
.
├── assets
│ ├── index.pug
│ ├── js
│ │ ├── fn.js
│ │ └── fn2.js
│ └── scss
│ └── all.scss
├── dist
│ ├── css
│ │ ├── all.css
│ │ └── all.css.map
│ ├── index.html
│ └── js
│ ├── all.js
│ └── all.js.map
├── gulpfile.js
├── package-lock.json
└── package.json
启用成功
到目前为止 babel 任务都是要手动执行编译的 让我们加上 watch 吧
- gulpfile.js
const gulp = require("gulp");
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
gulp.task("views", () => {
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($.sourcemaps.init())
.pipe($.sass().on("error", $.sass.logError))
.pipe($.postcss(plugins))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/css"));
});
const babelHandle = () => {
gulp
.src("./assets/js/**/*.js")
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"));
};
gulp.task("babel", () => {
babelHandle();
return $.watch("./assets/js/**/*.js", babelHandle);
});
gulp.task("default", ["views", "sass", "babel"]);
注释: 坑!!
// 这里有一个坑
// 按照 gulp-watch 之前的用法 代码应该是这样的
gulp.task("babel", () => {
return (
gulp
.src("./assets/js/**/*.js")
// 只需要在这里加上一行watch
// 但是 这样会使 js 编译中断 , 其他sass, pug 还是能运作
.pipe($.watch("./assets/js/**/*.js"))
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"))
);
});
// 查看文档, 使用另一种监听方法
$.watch("css/**/*.css", function() {
gulp.src("css/**/*.css").pipe(gulp.dest("build"));
});
// 这种方法 只监听 文件修改行为, 所以封装一个 handle 函数
// 在执行任务的时候 手动调用一下
const babelHandle = () => {
gulp
.src("./assets/js/**/*.js")
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"));
};
gulp.task("babel", () => {
babelHandle();
return $.watch("./assets/js/**/*.js", babelHandle);
});
- 运行
gulp
修改 assets/index.pug assets/scss/all.scss assets/js/fn.js 测试效果
Gulp 与 Bower 结合使用
bower 简易教程
- 使用 main-bower-files
- 安装
npm i -D main-bower-files
- 初始化
-
初始化 bower
bower init- 生成 bower.json 文件
-
安装 bootstrap jQuery
bower i bootstrap jquery --save
- 修改 gulpfile.js 文件
// 省略其他未变动代码
var mainBowerFiles = require("main-bower-files");
gulp.task("bower", function() {
return (
gulp
.src(mainBowerFiles())
// 输出到临时文件夹 tmp/vendors
.pipe(gulp.dest("./tmp/vendors"))
);
});
// 添加任务
gulp.task("default", ["views", "sass", "babel", "bower"]);
- 运行
gulp
文件树
.
├── tmp
│ └── vendors
├── assets
│ ├── index.pug
│ ├── js
│ └── scss
├── bower.json
├── bower_components
│ ├── bootstrap
│ └── jquery
├── dist
│ ├── css
│ ├── index.html
│ └── js
├── gulpfile.js
├── package-lock.json
└── package.json
生成 tmp/vendors
把 bower 生成的文件夹及文件合并到 dist 文件夹
- 修改 gulpfile.js 文件
// 省略其他未变动代码
// 先执行完 bower 任务再 执行 vendorJs 里的函数
gulp.task("vendorJs", ["bower"], () => {
return gulp
.src("./tmp/vendors/**/*.js")
.pipe($.concat("venders.js"))
.pipe(gulp.dest("./dist/js"));
});
// 添加 vendorJs任务, 删除 bower任务
gulp.task("default", ["pug", "sass", "babel", "vendorJs"]);
- 运行
gulp
- dist/js 目录下生成 venders.js 文件
Bower 补充说明
并非所有插件对于 bower 的运用都那么友善
以 Vue.js 来说，他就不会正确取得 dist 文件夹内的 vue.js
此時可以透过自定义 mainBowerFiles 方式来做调整
- 安装 vuejs
bower install vue --save
- 修改 gulpfile.js 文件
// 省略其他未变动代码
gulp.task("bower", () => {
return gulp
.src(
mainBowerFiles({
overrides: {
vue: {
// 插件名称
main: "dist/vue.js" // 对应的文件路径
}
}
})
)
.pipe(gulp.dest("./tmp/vendors"));
cb(err);
});
- 另外，如果外部载入的插件如果需要排序
- gulp-order
像是 Bootstrap 与 jQuery 会有先后顺序的需求
gulp-order 可以通过 数组 排列自己所需要的顺序
gulpfile.js 文件
// 省略其他未变动代码
gulp.task("vendorJs", ["bower"], () => {
return gulp
.src(["./tmp/vendors/**/**.js"])
.pipe($.order(["jquery.js", "bootstrap.js"]))
.pipe($.concat("vendor.js"))
.pipe(gulp.dest("./dist/js"));
});
网页开发不可或缺的 Webservice
开启微型服务器, 并自动刷新浏览器
- browser-sync
- Browsersync + Gulp.js
- 安装
npm i -D browser-sync
- gulpfile.js 文件
const gulp = require("gulp");
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
const mainBowerFiles = require("main-bower-files");
const browserSync = require("browser-sync").create();
gulp.task("pug", () => {
return (
gulp
.src("./assets/**/*.pug")
.pipe($.watch("./assets/**/*.pug"))
.pipe($.plumber())
.pipe(
$.pug({
pretty: true
})
)
.pipe(gulp.dest("./dist/"))
// 文件导出后 自动刷新 浏览器
.pipe(browserSync.stream())
);
});
gulp.task("sass", () => {
const plugins = [
autoprefixer({
browsers: ["last 1 version"]
})
];
return (
gulp
.src("./assets/scss/**/*.scss")
.pipe($.watch("./assets/scss/**/*.scss"))
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass().on("error", $.sass.logError))
.pipe($.postcss(plugins))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/css"))
// 文件导出后 自动刷新 浏览器
.pipe(browserSync.stream())
);
});
const babelHandle = () => {
gulp
.src("./assets/js/**/*.js")
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"))
// 文件导出后 自动刷新 浏览器
.pipe(browserSync.stream());
};
gulp.task("babel", () => {
babelHandle();
return $.watch("./assets/js/**/*.js", babelHandle);
});
gulp.task("bower", () => {
return gulp.src(mainBowerFiles()).pipe(gulp.dest("./tmp/vendors"));
});
gulp.task("vendorJs", ["bower"], () => {
return (
gulp
.src("./tmp/vendors/**/*.js")
.pipe($.concat("venders.js"))
.pipe(gulp.dest("./dist/js"))
// 文件导出后 自动刷新 浏览器
.pipe(browserSync.stream())
);
});
gulp.task("browser-sync", () => {
browserSync.init({
server: {
// 指定默认 文件夹
baseDir: "./dist/"
}
});
});
// 添加任务
gulp.task("default", ["pug", "sass", "babel", "vendorJs", "browser-sync"]);
- 运行
gulp
编译结束后 会自动打开浏览器 默认是 3000 端口
修改文件 测试效果
优化,压缩你的代码
- gulp-clean-css
- gulp-uglify
- 安装
npm i -D gulp-clean-css gulp-uglify
- gulpfile.js 文件
// 省略未修改的代码
gulp.task("sass", () => {
const plugins = [
autoprefixer({
browsers: ["last 1 version"]
})
];
return (
gulp
.src("./assets/scss/**/*.scss")
.pipe($.watch("./assets/scss/**/*.scss"))
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass().on("error", $.sass.logError))
.pipe($.postcss(plugins))
// css 文件输出前 压缩代码
.pipe($.cleanCss({ compatibility: "ie8" }))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/css"))
.pipe(browserSync.stream())
);
});
const babelHandle = () => {
gulp
.src("./assets/js/**/*.js")
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
// js 文件输出前 压缩代码
.pipe($.uglify())
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"))
.pipe(browserSync.stream());
};
gulp.task("vendorJs", ["bower"], () => {
return (
gulp
.src("./tmp/vendors/**/*.js")
.pipe($.concat("venders.js"))
// js 文件输出前 压缩代码
.pipe($.uglify())
.pipe(gulp.dest("./dist/js"))
.pipe(browserSync.stream())
);
});
- 运行
gulp
- 未压缩前的 all.js
"use strict";
var fn = function fn() {
return console.log(1);
};
fn();
("use strict");
var fn2 = function fn2() {
return console.log(2);
};
fn2();
//# sourceMappingURL=all.js.map
- 压缩后的 all.js
"use strict";
var fn = function() {
return console.log(1);
};
fn();
var fn2 = function() {
return console.log(2);
};
fn2();
//# sourceMappingURL=all.js.map
- 压缩后的 all.css
body {
color: #00f;
}
.card {
-webkit-transform: rotate(91deg);
transform: rotate(91deg);
}
/*# sourceMappingURL=all.css.map */
- 其他配置
- 压缩配置
gulpfile.js 文件
// some code
.pipe($.uglify({
compress: {
// 把 console 移除
drop_console: true
}
}))
// some code
- browser-sync
gulpfile.js 文件
// some code
browserSync.init({
server: { baseDir: "./dist" },
// 重新整理间隔 2000ms
reloadDebounce: 2000
});
// some code
根据开发环境调整输出内容
-
develop
- js
- 保留 console
- 不压缩
- css
- 不压缩
- js
-
production
- js
- 不保留 console.log(), 压缩
- css, html
- 压缩
- js
minimist
gulp-if
- 安装
npm i -D minimist gulp-if
- 修改相关文件
gulpfile.js 文件
const minimist = require("minimist");
const envOptions = {
string: "env",
default: { env: "develop" }
};
const options = minimist(process.argv.slice(2), envOptions);
console.log(options);
gulp.task("sass", () => {
const plugins = [
autoprefixer({
browsers: ["last 1 version"]
})
];
return (
gulp
.src("./assets/scss/**/*.scss")
.pipe($.watch("./assets/scss/**/*.scss"))
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass().on("error", $.sass.logError))
.pipe($.postcss(plugins))
// 加入判断 如果没有传入 env 默认是 develop 不压缩 css
.pipe(
$.if(options.env === "production", $.cleanCss({ compatibility: "ie8" }))
)
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/css"))
.pipe(browserSync.stream())
);
});
- 运行
gulp sass
终端打印 { _: [], env: 'develop' }
css 文件没有压缩
- 运行
gulp sass --env production
终端打印 { _: [], env: 'production' }
css 文件压缩
- gulpfile.js 文件
// 省略大部分未修改代码
gulp.task('pug', () => {
.pipe( $.pug({
pretty: options.env !== 'production'
}))
})
gulp.task('sass', () => {
.pipe($.if(options.env === 'production', $.cleanCss({
compatibility: "ie8"
})))
})
const babelHandle = () => {
.pipe($.if(options.env === 'production', $.uglify()))
}
gulp.task('vendorJs', ['bower'], () => {
.pipe($.if(options.env === 'production', $.uglify()))
})
- 运行
gulp
文件没有压缩
- 运行
gulp --env production
文件被压缩
整理你的文件(夹)
- gulp-clean
- gulp-sequence
- 安装
npm i -D gulp-clean gulp-sequence
- gulpfile.js 文件
// 省略大部分未修改代码
gulp.task("clean", function() {
// 多个文件(夹)用数组表示
return gulp.src(["./tmp", "./dist"], { read: false }).pipe($.clean());
});
- 运行
gulp clean
dist tmp 文件夹都被删除了
使用 gulp-sequence 打包 production 代码
gulpfile.js 文件
// 省略大部分未修改代码
const gulpSequence = require('gulp-sequence')
gulp.task('pug', () => {
return gulp.src('./assets/**/*.pug')
.pipe($.if(options.env !== 'production', $.watch('./assets/**/*.pug')))
.pipe($.plumber())
.pipe($.pug({
pretty: options.env !== 'production'
}))
.pipe(gulp.dest('./dist/'))
.pipe(browserSync.stream())
})
gulp.task('sass', () => {
return gulp.src('./assets/scss/**/*.scss')
.pipe($.if(options.env !== 'production', $.watch('./assets/scss/**/*.scss')))
.pipe($.if(options.env === 'production', $.cleanCss({
compatibility: "ie8"
})))
})
const babelHandle = () => {
.pipe($.if(options.env === 'production', $.uglify()))
}
gulp.task('babel', () => {
$.if(options.env === 'production', () => {
return $.watch('./assets/js/**/*.js', babelHandle)
})
})
gulp.task('vendorJs', ['bower'], () => {
return gulp.src('./tmp/vendors/**/*.js')
.pipe($.if(options.env === 'production', $.uglify()))
})
// 创建任务
gulp.task('build', gulpSequence('clean', 'pug', 'sass', 'babel', 'vendorJs'))
坑!!
// 这一类(监视)代码 需要判断环境
// gulpSequence() 执行的是一个任务执行完再执行下一个任务 clean, pug, sass
// 如果启用 watch 就会一直等 watch 停止再继续, 所以这里需要通过 环境变量判断是否开启 watch
.pipe($.if(options.env !== 'production', $.watch('./assets/scss/**/*.scss')))
$.if(options.env === 'production', () => {
return $.watch('./assets/js/**/*.js', babelHandle)
})
- ... 上面的代码太丑了, 重新整理一下
- gulpfile.js 完整文件
const gulp = require("gulp");
const minimist = require("minimist");
const $ = require("gulp-load-plugins")();
const autoprefixer = require("autoprefixer");
const gulpSequence = require("gulp-sequence");
const mainBowerFiles = require("main-bower-files");
const browserSync = require("browser-sync").create();
const envOptions = {
string: "env",
default: {
env: "develop"
}
};
const options = minimist(process.argv.slice(2), envOptions);
const pugHandle = () => {
return gulp
.src("./assets/**/*.pug")
.pipe($.plumber())
.pipe(
$.pug({
pretty: options.env !== "production"
})
)
.pipe(gulp.dest("./dist/"))
.pipe(browserSync.stream());
};
const sassHankdle = () => {
const plugins = [
autoprefixer({
browsers: ["last 1 version"]
})
];
return gulp
.src("./assets/scss/**/*.scss")
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass().on("error", $.sass.logError))
.pipe($.postcss(plugins))
.pipe(
$.if(
options.env === "production",
$.cleanCss({
compatibility: "ie8"
})
)
)
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/css"))
.pipe(browserSync.stream());
};
const babelHandle = () => {
gulp
.src("./assets/js/**/*.js")
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.babel({
presets: ["env"]
})
)
.pipe($.concat("all.js"))
.pipe($.if(options.env === "production", $.uglify()))
.pipe($.sourcemaps.write("."))
.pipe(gulp.dest("./dist/js"))
.pipe(browserSync.stream());
};
const bowerHanle = () => {
return gulp.src(mainBowerFiles()).pipe(gulp.dest("./tmp/vendors"));
};
gulp.task("pug", pugHandle);
gulp.task("sass", sassHankdle);
gulp.task("babel", babelHandle);
gulp.task("bower", bowerHanle);
gulp.task("clean", function() {
return gulp
.src(["./tmp", "./dist"], {
read: false
})
.pipe($.clean());
});
gulp.task("vendorJs", ["bower"], () => {
return gulp
.src("./tmp/vendors/**/*.js")
.pipe($.concat("vendors.js"))
.pipe($.if(options.env === "production", $.uglify()))
.pipe(gulp.dest("./dist/js"))
.pipe(browserSync.stream());
});
gulp.task("browser-sync", () => {
browserSync.init({
server: {
baseDir: "./dist/"
}
});
});
gulp.task("watch", () => {
$.watch("./assets/**/*.pug", pugHandle);
$.watch("./assets/scss/**/*.scss", sassHankdle);
$.watch("./assets/js/**/*.js", babelHandle);
});
gulp.task("build", gulpSequence("clean", "pug", "sass", "babel", "vendorJs"));
gulp.task("default", [
"pug",
"sass",
"babel",
"vendorJs",
"watch",
"browser-sync"
]);
- 运行
gulp build
仅仅进行编译, 并不会监视, 和运行 webservice
- 运行
gulp
跟之前一样, 编译, 启动 webservice
- 运行
gulp --env production或者gulp build --env production
得到的结果是结果 压缩 的
图片压缩
- 安装 gulp-imagemin
npm i -D gulp-imagemin
- 修改文件
gulpfile.js
gulp.task("image-min", () =>
gulp
.src("./assets/img/*")
// 因为图片压缩十分耗时 所以只在 生产环境下压缩图片
.pipe($.if(options.env === "production", $.imagemin()))
.pipe(gulp.dest("./dist/img"))
);
// 添加任务
gulp.task(
"build",
gulpSequence("clean", "pug", "sass", "babel", "vendorJs", "image-min")
);
gulp.task("default", [
"pug",
"sass",
"babel",
"vendorJs",
"image-min",
"watch",
"browser-sync"
]);
一键部署 GitHub Pages
- 安装 gulp-gh-pages
npm install --save-dev gulp-gh-pages
- 修改文件
gulpfile.js
gulp.task("deploy", function() {
return gulp.src("./dist/**/*").pipe($.ghPages());
});
把 deploy 加到 任务列表, 每次运行会自动上传到 gh-pages
在 pug 中传入数据
- gulp-data
- 安装
npm i -D gulp-data
- 修改文件
添加文件 assets/_pug/head.pug
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
link(rel="stylesheet" href="./css/all.css")
script(src="./js/all.js")
assets/index.pug
html(lang="en")
head
include _pug/head.pug
body
h1 #{user[0].url}
添加文件 assets/data/data.json
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
link(rel="stylesheet" href="./css/all.css")
script(src="./js/all.js")
gulpfile.js
const pugHandle = () => {
return (
gulp
// 多个匹配规则用数组
// "./assets/**/*.pug" 来源是assets文件下所有的 pug文件
// "!./**/_pug/**/*" 排除 _pug 目录
.src(["./assets/**/*.pug", "!./**/_pug/**/*"])
.pipe($.plumber())
.pipe(
// 把数据输入到 pug 模板内
$.data(() => {
// 引入 data.json 数据文件
const user = require("./assets/data/data.json");
const data = {
user
};
return data;
})
)
.pipe(
$.pug({
pretty: options.env !== "production"
})
)
.pipe(gulp.dest("./dist/"))
.pipe(browserSync.stream())
);
};
gulp.task(
"build-no-bower",
gulpSequence("clean", "pug", "sass", "babel", "image-min")
);
- 运行
gulp build-no-bower
dist/index.html
Document
hello world
使用外部 sass 文件
gulpfile.js
const sassHankdle = () => {
const plugins = [autoprefixer({
browsers: ["last 1 version"]
})]
return gulp.src('./assets/scss/**/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass({
// 引入路径
includePaths: ['./node_modules/bootstrap/sass/']
}).on('error', $.sass.logError))
.pipe($.postcss(plugins))
.pipe($.if(options.env === 'production', $.cleanCss({
compatibility: "ie8"
})))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream())
}
assets/scss/all.css
// 这里的路径会直接补齐 ./node_modules/bootstrap/sass/bootstrap
@import 'bootstrap';
合并来自 NPM 的 JS
gulpfile.js
gulp.task('vendorJs', ['bower'], () => {
return gulp.src([
'./tmp/vendors/**/*.js',
// 加入要引入的 js 文件
'./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
])
.pipe($.concat('vendors.js'))
.pipe($.if(options.env === 'production', $.uglify()))
.pipe(gulp.dest('./dist/js'))
.pipe(browserSync.stream())
})