1、自动化构建工具 Gulp
Grount Gulp FIS
Gulp 与 npm script: 都能够实现自动化构建; 但 Gulp 语法简单, Gulp 语法就是 Javascript 语法,npm script 语法接近 shell 脚本; Gulp 生态完善,构建效率高
步骤: 1、全局安装 gulp 客户端(npm install -g gulp-cli)
2、初始化项目(npm init --yes)
3、安装 gulp 包(npm install gulp -D)
4、新建 gulpfile 文件(gulpfile.js)
5、在 gulpfile.js 中,创建 gulp 任务
6、执行 gulp 任务(gulp <task-name>
2、Gulp 组合任务
并行 gulp.paralle(task1, task2, task3)
串行 gulp.series(task1, task2, task3)
3、Gulp 文件操作
缓冲方式: 源文件==>内存缓冲==>目标文件
流方式: 将文件分为小块,一块一块的操作
Gulp是基于 流 的构建系统: 读取流(输入) ==> 转换流(加工) ==> 写入流(输出)
src() ==> pipe()(管道流方法可以有多个操作) ==> dest()
src() 输入的内容 第二个参数{base:"src"} base参考目录是src
pipe() 管道 可以使用多次
dest() 目标
4、Gulp 构建样式文件
gulp-less 将 less 转 css
gulp-clean-css 压缩css
gulp-rename 重命名 参数 {extname:""} 重命后缀名
autoprefixer
CSS hack 与 Autoprefixer :保证 CSS 兼容性
CSS hack: CSS代码存在兼容性的问题,同一段CSS代码在不同浏览器上的呈现效果不同; 针对不同浏览器写响应的 CSS 代码,这个过程叫做CSS hack
CSS hack 的目的就是使CSS代码兼容不同的浏览器
属性前缀法 :
user-select 属性可以控制用户能否选中文本(存在兼容问题);给CSS属性添加浏览器特有的前缀:IE -ms-; Chrome -webkit- ; Safari -webkit- ; Firefox -moz- ; Opera -o-
Autoprefixer使用caniuse.com的数据来决定哪些属性需要加前缀
5、Gulp 构建脚本文件
所需的插件:gulp-babel ES6+新语法转成ES5;
gulp-uglify 压缩js代码;
gulp-rename 对文件进行重命名 参数 {extname:""} 重命后缀名
6、Gulp 构建页面(HTML)文件
gulp-htmlmin 压缩HTML文件
参数collapseWhitespace: true 空白折叠
minifyCSS true 压缩css
minifyJS true 压缩js
7、Gulp 构建资源(图片)文件
gulp-imagemin 压缩图片文件
安装依赖报错解决方案
报错:gulp-imagemin: Coulden't load default plugin "gifsicle"
gulp-imagemin: Coulden't load default plugin "optipng"
解决:配置hosts:通过vscode打开hosts文件(C:\Windows\System32\drivers\etc);添加Github hosts 内容;保存(如无权限,以管理员身份新打开文件)
然后重新安装 gulp-imagemin
8、Gulp 文件清除
del 删除文件和目录
// 清除文件、文件夹 任务
const clean = () => {
// 指定删除文件或目录
return del(['dest']);
}
9、开发服务器构建插件
browser-sync 发布 web 服务
npm i browser-sync -D
引入:const browsersync = require("browser-sync");
const bs = browsersync.create();
声明 服务发布 任务
const serve = () => {
// watch(被监视的文件, 对应的任务) gulp.watch
watch('src/index.html', html);
// 初始化服务
bs.init({
// 禁用浏览器右上角的 browserSync connected 提示框
notify: false,
server: {
// 指定服务启动的目录
baseDir: './dist'
}
});
}
官网:https://browsersync.io/
文档:http://www.browsersync.cn/docs/
安装Bootstrap bootstrap 提供常用的页面效果;jquery bootstrap 的依赖包
10、Gulp 开发服务器中监视文件变化
Gulp 在 Yeoman 中的应用:以 webapp 生成器为例