天天用 webpack 你还记得 gulp 是啥吗

针对不同浏览器，写不同 CSS 代码的过程称为 CSS Hack。

CSS Hack 有三种形式：CSS 属性 Hack、CSS选择符 Hack 和 IE条件注释 Hack（ Hack主要针对IE浏览器 ）

• 属性级 Hack

比如 IE6 能识别下划线“`_`”和星号“`*`”，IE7 能识别星号“`*`”，但不能识别下划线”`_` ”

• 选择符级 Hack

IE6 能识别 `*html .class{}`

IE7 能识别 `*+html .class{}` 或者 `*:first-child+html .class{}`

• IE 条件注释 Hack：

# 针对 IE6 及以下版本：

<!--[if lt IE 6]>您的代码<![endif]-->

这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。

本小节，只讨论属性级 Hack

不同浏览器的 CSS 属性前缀：

例如：use-select 存在兼容性问题。CSS 属性 Hack 的解决方案如下：

上述添加 CSS 属性前缀的操作，之前是通过程序员手动添加的。这类重复性操作，我们可以通过插件完成。

在 Gulp 中 gulp-autoprefixer 插件，可以根据 caniuse.com 上提供的 CSS 兼容性数据，自动地给 CSS 属性加前缀，以保证 CSS 代码的兼容性问题。

脚本文件构建

对 JS 代码进行 Babel 转换和压缩。

注意：因为不同 babel 版本对应的 gulp-babel 的安装命令不同，所以安装 gulp-babel 之前需要先确定本地 babel 版本 （通过 babel --version 查看）

Babel 7

$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

Babel 6

$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

我本地的 babel 版本是 6，所以，执行 6 的安装命令

npm install --save-dev gulp-babel@7 babel-core babel-preset-env

安装压缩脚本的插件

npm i gulp-uglify -D

在 gulpfile.js 中添加脚本编译内容

const rename = require(‘gulp-rename’)

const babel = require(‘gulp-babel’)

const uglify = require(‘gulp-uglify’)

const script = () => {

return src(‘src/scripts/*.js’, { base: ‘src’ })

.pipe(babel({

presets: [ ‘babel-preset-env’ ] // 不同版本的 babel，其转换规则写法也不同

}))

.pipe(uglify())

.pipe(rename({ “extname”: “.min.js” }))

.pipe(dest(‘dist’))

}

module.exports = {

style,

script

}

运行命令

gulp script

页面模板构建

对 html 文件的构建，主要指压缩 html 文件。其中 gulp-htmlmin 插件可以完成压缩任务。

gulp-htmlmin 插件的解析器是：https://github.com/kangax/html-minifier

想要查看 htmlmin 的使用参数，可以查看上述链接。

添加 htmlmin 插件

npm i gulp-htmlmin -D

在 gulpfile.js 中添加页面处理内容

const htmlmin = require(‘gulp-htmlmin’)

const html = () => {

return src(‘src/*.html’, { base: ‘src’ })

.pipe(htmlmin({

collapseWhitespace: true, // 去除标签之间多余的空行和空白

minifyCSS: true, // 压缩HTML中的CSS代码

minifyJS: true // 压缩HTML中的JS代码

}))

.pipe(dest(‘temp’))

}

module.exports = {

style,

script,

html

}

运行命令

gulp html

完成上述三个构建任务后，我们可以将 style，script 和 html 任务组合起来。因为 style，script 和 html 之间没有明确的前后顺序，所以，可以进行并行执行，并行执行可以提升构建效率。

引入 parallel 函数

const { src, dest, parallel } = require(‘gulp’)

// 任务的并行执行

const build = parallel(style, script, html)

module.exports = {

build

}

运行命令

gulp build

图片（字体）文件转换

对图片文件的构建，主要是指图片的压缩。通过 gulp-imagemin 插件可以完成图片的压缩任务。

安装 imagemin 插件

npm i gulp-imagemin -D

在 gulpfile.js 中引入图片压缩插件

const imagemin = require(‘gulp-imagemin’)

// 图片构建任务

const image = () => {

return src(‘src/images/**’, { base: ‘src’ })

.pipe(imagemin())

.pipe(dest(‘dist’))

}

// 图片构建任务，也可以与以上三个任务一起，并行执行

const build = parallel(style, script, html, image)

module.exports = {

image,

build

}

运行命令

gulp build

报错处理：

gulp-imagemin: Couldn’t load default plugin “gifsicle”

gulp-imagemin: Couldn’t load default plugin “optipng”

原因：npm 安装依赖失败

解决：

1. 配置 hosts (详情参考本节最后的附录部分)

2. 重新安装 npm i gulp-imagemin -D

文件清除

有时候，我们需要删除一些构建的历史文件，然后再重新构建。删除文件操作，可以通过 del 插件完成。

通过del插件来删除指定文件

npm i del -D

const del = require(‘del’)

// 声明清除任务

const clean = () => {

return del([‘dist’])

}

// 编译之前，先执行clean，删除历史文件

const build = parallel(style, script, html, image)

const dev = series(clean, build)

module.exports = {

clean,

dev

}

运行命令，查看文件是否删除

gulp clean

或者

gulp dev

开发服务器

通过web服务器插件，将 dist 下的代码，发布到浏览器查看效果。发布web服务的插件有很多。这里，我们推荐功能强大的 browser-sync。

安装 browser-sync 插件

npm i browser-sync -D

在 gulpfile.js 中添加开发服务器的内容

const browserSync = require(‘browser-sync’)

const bs = browserSync.create()

// 声明 web 服务构建任务

const serve = () => {

bs.init({

server: {

baseDir: ‘./dist’ // 指定服务启动的目录

routes: {

‘/node_modules’: ‘node_modules’ // 引入 Bootstrap 是设置路径映射

}

}

})

}

module.exports = {

clean,

build，

serve

}

运行命令，然后在浏览器查看效果

gulp serve

服务发布成功后，之前学习的内容，也可以拿过来使用，例如：Bootstrap

1. 下载插件

# 因为 Bootstrap 和 jQuery 上线之后还要使用，所以，采用 -S 参数（上线依赖）

npm i bootstrap@3.4.1 jquery -S

2. 引入文件

Bootstrap 和 jQuery 下载后，文件位于当前目录的 node\_modules 下

# 在 HTML 中引入

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

......

<script src="/node_modules/jquery/dist/jquery.min.js"></script>

<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

**引入路径，需要在 browser-sync 中，通过 routes 参数映射后，才能正确引入**（详情查看上述代码）

3. 使用 Bootstrap

之前学习的 Bootstrap 的代码，都可以在当前代码中使用。

监视变化（热更新）

监视 src 下文件变化的页面更新，代码一旦更新，浏览器上的页面效果也随之更新。

此时，我们需要监视两个目录的变化，一个是 dist 目录，一个是 src 目录。

• 监视 dist 目录下代码的变化

通过 browser-sync 中的 files 字段

files: ‘dist/**’

• 监视 src 目录下代码的变化

通过 gulp 中的 watch 函数

watch(被监视的文件，对应的任务)

最终的代码如下：

在 gulpfile.js 中添加监视文件变化的代码

const serve = () => {

// watch(被监视的文件，对应的任务)

watch(‘src/index.html’, html)

watch(‘src/styles/*.less’, style)

watch(‘src/js/*.js’, script)

watch(‘src/images/**’, image)

// 初始化服务

bs.init({

notify: false, // 禁用浏览器右上角的 browserSync connected 提示框

files: ‘dist/**’, // 监视 dist 下 文件的变化，然后在浏览器上实时更新

server: {

baseDir: ‘./dist’, // 指定服务启动的目录

routes: {

‘/node_modules’: ‘node_modules’

}

}

})

}

// 组合任务

const build = parallel(style, script, html, image)

const dev = series(clean, build, serve)

// 导出任务

module.exports = {

build,

dev,

serve

}

运行命令，更新代码文件，查看页面变化

gulp dev

此时，不管是 dist 目录下，还是 src 目录下。只要代码发生变化，我们就可以在浏览器上实时看到效果。

附录

---

1. Win10 配置 hosts

1. 通过vscode 打开 hosts 文件

hosts 文件的路径

C:\Windows\System32\Drivers\etc

2. 添加 Guthub 相关的内容

将下面的内容复制，然后追加到 hosts 文件的尾部

GitHub Start (chinaz.com) =================================================

13.229.188.59 github.com

54.169.195.247 api.github.com

140.82.113.25 live.github.com

8.7.198.45 gist.github.com

185.199.108.154 github.githubassets.com

185.199.109.154 github.githubassets.com

185.199.110.154 github.githubassets.com

185.199.111.154 github.githubassets.com

34.196.247.240 collector.githubapp.com

52.7.232.208 collector.githubapp.com

52.216.92.163 github-cloud.s3.amazonaws.com

199.232.96.133 raw.githubusercontent.com

151.101.108.133 user-images.githubusercontent.com

151.101.108.133 avatars.githubusercontent.com

151.101.108.133 avatars0.githubusercontent.com

151.101.108.133 avatars1.githubusercontent.com

151.101.108.133 avatars2.githubusercontent.com

151.101.108.133 avatars3.githubusercontent.com

151.101.108.133 avatars4.githubusercontent.com

151.101.108.133 avatars5.githubusercontent.com

151.101.108.133 avatars6.githubusercontent.com

151.101.108.133 avatars7.githubusercontent.com

151.101.108.133 avatars8.githubusercontent.com

151.101.108.133 avatars9.githubusercontent.com

151.101.108.133 avatars10.githubusercontent.com

151.101.108.133 avatars11.githubusercontent.com

151.101.108.133 avatars12.githubusercontent.com

151.101.108.133 avatars13.githubusercontent.com

151.101.108.133 avatars14.githubusercontent.com

151.101.108.133 avatars15.githubusercontent.com

151.101.108.133 avatars16.githubusercontent.com

151.101.108.133 avatars17.githubusercontent.com

151.101.108.133 avatars18.githubusercontent.com

151.101.108.133 avatars19.githubusercontent.com

151.101.108.133 avatars20.githubusercontent.com

GitHub End ===================================================================

3. 保存文件

ctrl+s 保存，此时如果报：没有权限，点击以管理员身份重试

2. Mac 配置 hosts

1. 打开终端

2. 输入 sudo vi /etc/hosts

3. 输入密码

4. 进入文件 hosts，然后按 “i”，进入编辑模式

5. 把你的内容添加到最后

GitHub Start (chinaz.com) =================================================

13.229.188.59 github.com

54.169.195.247 api.github.com

140.82.113.25 live.github.com

8.7.198.45 gist.github.com

185.199.108.154 github.githubassets.com

185.199.109.154 github.githubassets.com

185.199.110.154 github.githubassets.com

185.199.111.154 github.githubassets.com

34.196.247.240 collector.githubapp.com

52.7.232.208 collector.githubapp.com

52.216.92.163 github-cloud.s3.amazonaws.com

151.101.108.133 raw.githubusercontent.com

151.101.108.133 user-images.githubusercontent.com

151.101.108.133 avatars.githubusercontent.com

151.101.108.133 avatars0.githubusercontent.com

151.101.108.133 avatars1.githubusercontent.com

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

34.196.247.240 collector.githubapp.com

52.7.232.208 collector.githubapp.com

52.216.92.163 github-cloud.s3.amazonaws.com

151.101.108.133 raw.githubusercontent.com

151.101.108.133 user-images.githubusercontent.com

151.101.108.133 avatars.githubusercontent.com

151.101.108.133 avatars0.githubusercontent.com

151.101.108.133 avatars1.githubusercontent.com

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】