gulp-project's Introduction

gulp-project

本示例目标

这是一份帮助你学习 gulp 的项目示例代码。仅仅是一份参考，没错，它正在服役，运用在正式项目上。请根据自己的项目对其进行修改。详情请戳「基于 gulp 的前端构建」。

学习的前提

了解 gulp 是做什么用的；
了解什么是前端项目的构建，什么是静态文件的打包。

构建目标

图片优化，雪碧图，图片 hash 戳；
sass 编译，css 压缩合并，css 文件 hash 戳；
js 检错，requirejs 打包，js 压缩合并，js 文件 hash 戳。

示例依赖

gulp
requirejs
sass

目录结构与说明

├─ gulp/                  # gulp配置目录
    ├─ tasks              # 任务配置目录
        ├─ image.js       # 图片配置
        ├─ other.js       # 其它配置
        ├─ script.js      # 脚本配置
        ├─ style.js       # 样式配置
        └─ view.js        # 页面配置
    └─ config             # gulp配置文件
├─ src/                   # 开发目录
    ├─ html/              # 存放html的目录
        ├─ app/           # 可提取复用的页面模块
        └─ page/          # 各页面入口文件
    ├─ images/            # 存放图片的目录
        ├─ single/        # 不需要合并的图片
        └─ sprite/        # 需要合并的图片
    ├─ js/                # 存放js的目录
        ├─ app/           # 可提取复用的脚步模块
        ├─ lib/           # 第三方js库
        ├─ page/          # 各页面入口脚本文件
        └─ config.js      # RequireJs的配置文件
    └─ sass/              # 存放sass的目录
        ├─ app/           # 可提取复用的样式模块
        └─ page/          # 各页面入口样式文件
├─ .jshintrc              # jshint参数配置文件
├─ gulpfile.js            # gulp入口配置文件
└─ package.json           # npm包管理文件