这是一份帮助你学习 gulp + webpack 的项目示例代码。仅仅是一份参考,请根据自己的项目对其进行修改。详情请戳「基于 gulp + webpack 的前端构建」。
- 了解 gulp 是做什么用的;
- 了解 webpack 是做什么用的;
- 了解什么是前端项目的构建,什么是静态文件的打包。
- 使用
gulp
对图片、css 文件进行打包; - 使用
webpack
对 js 文件进行打包。
- gulp
- webpack
- sass
├─ gulp/ # gulp配置目录
├─ tasks # 任务配置目录
├─ image.js # 图片配置
├─ other.js # 其它配置
├─ script.js # 脚本配置
├─ style.js # 样式配置
└─ view.js # 页面配置
├─ gulp.config.js # gulp配置文件
├─ webpack.config.js # webpack开发配置文件
└─ webpack.production.config.js # webpack上线配置文件
├─ src/ # 开发目录
├─ html/ # 存放html的目录
├─ app/ # 可提取复用的页面模块
└─ page/ # 各页面入口文件
├─ images/ # 存放图片的目录
├─ single/ # 不需要合并的图片
└─ sprite/ # 需要合并的图片
├─ js/ # 存放js的目录
├─ app/ # 可提取复用的脚步模块
└─ lib/ # 第三方js库
└─ sass/ # 存放sass的目录
├─ app/ # 可提取复用的样式模块
└─ page/ # 各页面入口样式文件
├─ gulpfile.js # gulp入口配置文件
└─ package.json # npm包管理文件
首先,别忘记安装 npm
,一切都是基于它之上进行玩转。
$ npm install
输入 gulp help
可查看全部命令:
# 开发监控,不监听js改动
- gulp dev
- gulp webpack
# 开发监控,监听js改动
- gulp watch
# 开发监控,浏览器自动刷新,不监听js改动
- gulp serve
- gulp webpack
# 开发监控,浏览器自动刷新,监听js改动
- gulp browser
# 打包上线
- gulp build
运行开发命令:
$ gulp watch
打包上线命令:
$ gulp build
了解该示例如何实现,并根据自身项目需求对其进行更改。