基于gulp+webpack 快速搭建的前端自动化脚手架

适用于中小型项目，快速构建前端项目框架。好比运营活动页，官网类，简单移动端项目，小demo测试等

项目启动

// 经常使用命令
开发环境： npm run dev
生产环境： npm run build

// 单任务命令
执行压缩： gulp zip
编译页面： gulp html
编译脚本： gulp script
编译样式： gulp styles
语法检测： gulp eslint
压缩图片： gulp images
复制代码

项目地址

• 如对你有帮助，但愿给个Star ！哈哈哈！！

git clone https://github.com/vincentSea/gulp-cli.git
复制代码

项目目录

├── README.md         # 项目说明
├── config            # gulp路径配置
├── dist              # 打包路径
|
├── gulpfile.js       # gulp配置文件
├── package.json      # 依赖包
|
├── src               # 项目文件夹
│   ├── include       # 公用页面引入
│   ├── index.html    # 首页
│   ├── static        # 资源文件夹
│   │   ├── images    # 图库
│   │   ├── js        # 脚本
│   │   └── styles    # 样式（scss, css）
│   └── views         # 页面
|
├── static            # 打包到dist中static文件中
└── webpack.config.js # webpack配置文件
复制代码

项目约定

一、 使用严格的 eslint 规范 文档连接

• 若是不想使用eslint，能够gulpfile文件中去掉该任务

二、使用scss预处理

• 能够根据我的喜爱，去配置不一样的预处理工具

三、static文件夹

• 一级目录中static文件夹，能够存放不须要编译的文件内容，好比一些插件，图片，字体文件等
• 每次npm run dev or build 都会把static文件夹下的内容，打包到dist/static里

代理模式

• config/index.js文件中配置

例子以下

middleware: [
  proxy.proxyPrase(
    {
      target: 'http://v3.wufazhuce.com:8000/api',
      route: '/api'
    }
  )
]
复制代码

使用webpack

• 集成webpack功能，能够自行选择

config/index.js文件

useWebpack: false // 是否启用webpack
复制代码

小生后话

• 此前端自动化构建框架，只是为了简单方便

• 能够随便根据本身的要求去进行修改配置

• 若有设计不合理地方，能够提出，我乃虚心听取

• 项目地址 如对你有帮助，但愿给个Star ！哈哈哈！！