之前已经写过量篇博客来说Gulp了,分别是Gulp入门和使用Gulp构建前端自动化解决方案
那为什么还要第三篇呢,因为在使用的过程中,我的gulpfile.js不断完善,慢慢找到了更好的方式,所以在这里记录下来,这也应该是我的最后一篇关于Gulp本身的博客了。以后如果变动,也会继续更新在这篇博客上。
这里单纯的记录我认为的最佳实践方式,如果还不了解Gulp,建议先去看看本文开头提到的两篇博客。
下边是我在写公司官网的时候逐步修改而成的目录结构和gulpfile.js,也算是目前我所摸索出来的最佳实践,使用这种结构和gulp,可以把前后端剥离开来,所有的前端内容都放在web文件夹下,最终发布给工程使用的内容放在static和templates文件夹下,方便开发,同时也统一了各个部分的相对路径,直接在web/app文件夹下进行开发,发布之后的路径都不会有错。
工程结构:
myproject/ 工程根目录
├── backfonts/ 这里是后台相关的文件夹,可能有多个
│
├── web/ 在工程根目录下,创建一个web文件夹,前端的开发环境都在这个文件夹内吗,实现前后端分离
│ │
│ ├── .sass-cache/ 这里是sass编译所自动创建的文件夹
│ │
│ ├── app/ 这里是开发文件,所有的编写,修改,删除都在这个文件夹下进行
│ │ └─── css 这里存放外部引入无需修改的css文件,例如:font-awesome.min.css
│ │ └─── fonts 字体文件
│ │ └─── img 图片
│ │ └─── js js文件
│ │ └─── sass 这里存放sass文件,例如:index.scss
│ │
│ ├── dist/ 这里是编译压缩之后的文件,供gulp使用,启动服务器并且自动刷新浏览器,方便开发
│ │ └─── static 最终发布给工程的静态文件在static中,所以这里也是,以便保持相对路径正确
│ │ └─── css 这里 外部引入的css + sass编译并压缩之后的css
│ │ └─── fonts 字体文件(字蛛压缩过的文件会直接放在这里)
│ │ └─── .font-spider (字蛛生成的文件夹,被压缩过的字体的源文件放在这里,没啥用)
│ │ └─── img 图片
│ │ └─── js 压缩过的js文件
│ │
│ ├── node_modules/ 装gulp插件的时候生成的文件夹,里边放着各种各样你不用关心的文件
│ │
│ ├── gulpfile.js 编写gulp任务的文件
│ │
│ ├── package.json 记录各种信息的json
│
├── static/ 最终发布给工程使用的静态文件,包括但不限于css,fonts,img,js
└── templates/ 最终发布给工程使用的 模板文件,一般是html,或者jsp等等
gulpfile.js文件:
'use strict';
//gulp
var gulp = require('gulp'),
//多浏览器多设备同步&自动刷新
browserSync = require('browser-sync').create(),
SSI =