gulp-webpack-project

本示例模板

这是一份帮助你学习 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包管理文件

1. 安装 NPM

首先，别忘记安装 npm，一切都是基于它之上进行玩转。

$ npm install

2. 运行命令

输入 gulp help 可查看全部命令：

# 开发监控，不监听js改动
  - gulp dev
  - gulp webpack

# 开发监控，监听js改动
  - gulp watch

# 开发监控，浏览器自动刷新，不监听js改动
  - gulp serve
  - gulp webpack

# 开发监控，浏览器自动刷新，监听js改动
  - gulp browser

# 打包上线
  - gulp build

运行开发命令：

$ gulp watch

打包上线命令：

$ gulp build

3. 查看源代码

了解该示例如何实现，并根据自身项目需求对其进行更改。

基于 gulp + webpack 的前端构建

前言

在「基于 gulp 的前端构建」中，我尝试使用 gulp 来构建前端项目，其中]使用 requirejs 来做模块加载器。但由于 requirejs 的路径问题使得打包起来有点麻烦，再加上它的 amd 写法引入有点不优雅，于是尝试使用 webpack 替代 requirejs，webpack 支持 amd、commonJS 甚至 ES6 写法，其中如果你经常编写 Grunt 或 gulp 就一定对 commonJS 不陌生。

接下来的内容跟之前用 gulp 构建的思路大致相同，其中只是将 requirejs 打包替换成了 webpack 打包。变化比较多的就是命令增多了，原因接下来会说到。

gulp & webpack 目录

添加了两个关于 webpack 的文件，一个用于开发阶段，一个用于打包上线阶段。

└─ 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上线配置文件

开发阶段

参考：「gulp + webpack 构建多页面前端项目」。

这里增加了几条命令，其中不自动刷新浏览器的命令和自动刷新浏览器的命令各有两套。有的人喜欢改动文件后自己手动刷新浏览器，而有的人则喜欢浏览器根据文件改动自动刷新，这里都有。

不自动刷新浏览器的命令

gulp watch

输入 gulp watch 便会生成可运行的代码，但是只要其中一个 js 文件改变 webpack 都会把全部的 js 文件都重新编译一遍，如果 js 文件数量很多的话，那等待的时间也会有点久。

gulp dev & gulp webpack

需注意的是，得按照先后顺序先运行 gulp dev，然后再运行 gulp webpack。原因是 gulp dev 里包含了删除 dist 目录的所有代码。

这里因为 gulp 的监听与 webpack 的监听会起冲突，所以需要打开两个 console。gulp dev 监听 html 和 css 文件的改动，gulp webpack 监听 js 文件的改动。这样解决了上一条命令中的性能问题，它只会去编译修改过的 js 文件而不是全部。但是由于它需要打开两个 console，所以如果 js 文件数量不是很多的话可以考虑用 gulp watch。

效果图如下：

自动刷新浏览器的命令

gulp browser

包含了 gulp dev 的功能，然后会自动打开 127.0.0.1:3000 ，并监听文件的改动自动刷新浏览器。

gulp serve & gulp webpack

需注意的是，得按照先后顺序先运行 gulp serve，然后再运行 gulp webpack。

包含了 gulp dev & gulp webpack 的功能，并自动刷新浏览器。

上线阶段

输入 gulp build 命令后最终生成的代码依然在 dist 目录下，也就是说在开发阶段与上线打包阶段构建生成的代码都在同一个目录下，只不过在开发阶段代码是未进行合并压缩，上线打包阶段代码是经过合并压缩打上 hash 戳的。

其中 webpack.production.config.js 跟开发阶段的 webpack.config.js 有些区别，主要是不包含了 sourcemap，还有把 js 代码压缩了。

gulp.task('webpack:build', plugins.shell.task([
    'webpack --process --colors --config gulp/webpack.production.config.js'
]));

wabish / gulp-webpack-project Goto Github PK