起因
- 习惯了基于集成了各种工具的cli，来进行开发后，有时候回到最最最原始的三剑客(HTML+CSS+JS)，纯手撸的时候觉得效率过于低下。
- 尤其是写CSS的时候，为了避免因为标签权重问题导致的样式错乱，而不停的重复写选择器，还有没有全局管理样式的功能，导致不停的去查查改改。。。
- 基于上述和还有很多一时没想起的问题，所以有了做一个自己的非SPA应用的脚手架的想法
关于该脚手架
使用用gulp搭建的自动化脚手架
适用场景
- 写静态官网
- 练习TS/ES6
功能描述
- 支持区分生产/开发环境
- 支持LESS（可选是否使用）
- 支持ES6（模块化不支持）
- 支持TS（可选是否使用）
- 支持生产环境时HTML+CSS+JS+图片压缩
2020-4-16更新 1.0.0->1.1.0
- 添加了自己封装的工具函数模块
- 添加对AMD模块化支持 如何使用
食用指南
下载该脚手架
测试阶段，暂时只能通过github来下载
git clone git@github.com:SHUAXINDIARY/demo-cli.git安装依赖
# 1.先安装node
# 2.全局安装gulp
npm i gulp -g
# 3.安装依赖
npm i目录说明
+ src---开发目录
+ assets---存放其他资源：resetcss、图标等
+ css---样式文件
+ js----js代码
+ less--less文件(可选：不使用无视即可)
+ ts----ts文件(可选：不使用无视即可)
- index.html---src根目录存放页面文件
- babelrc---babel配置(可自定义参考官方配置)
+ gulpfile.js---gulp配置目录
- index.js---入口文件
- Tasks.js---任务方法文件
- paths.js---打包入口/出口路径
- tsconfig.json--ts配置文件(可自定义参考)
- config.json----配置项目环境：例如是否使用ts/less、配置本地服务器信息开始食用
# 开发环境
npm run dev
# 部署前打包
npm run build食用配置
以下配置根据自行情况选择
是否使用less
- 进入config.js
- 设置less为true
是否使用ts
- 同上
- ts编译相关配置，参考官方文档
- 关于ts编译配置支持情况查看gulp-typescript
配置本地服务器信息
- 进入config.js
- 可根据gulp-connect配置