这是一个我用来写网易云课堂前端微专业各种demo和作业的仓库。使用gulp搭建了一个简单的自动化工作流，使用了下一代的打包工具rollup，目前包含编译sass与es6、css压缩、js压缩合并、浏览器自动刷新等功能。
安装nodejs，并设置NODE_PATH环境变量，指向全局安装目录C:\Users\admin\AppData\Roaming\npm\node_modules 由于npm安装源太慢，建议换成淘宝cnpm安装源
下载或克隆此仓库，cd至文件下
cnpm install
|—— mode_modules npm安装的模块
|—— lib 其它库框架
|—— app 静态资源
| |—— demo 项目名
| | |—— src 开发目录
| | | |—— scripts js源代码
| | | | |—— app.js 启动入口文件
| | | | |—— components 公共组件目录
| | | | |—— views 组件视图目录
| | | |—— css 编译后的样式，也可直接在此目录下写css
| | | |—— sass sass源代码
| | | |—— images 未压缩原图片
| | | |—— js 打包后的js
| | |—— dist 发布目录
| | | |—— css 压缩后的样式
| | | |—— img 压缩后的图片
| | | |—— js js目录
| | | | |—— bundle.js 压缩并编译后的js
- 配置 project.config.js
/**
* projectdir:静态目录名称(项目名称)
* port:项目启动端口号
* version:版本号
*/
- 任务启动命令(gulp 静态目录名:任务名)
gulp demo:styles // 编译sass
gulp demo:mincss // 压缩css
gulp demo:images // 压缩图片
gulp demo:rollup // 打包JS
gulp demo:babel // 编译并压缩JS
gulp demo:html // 发布html
gulp demo:dev // 开启开发环境
gulp demo:clean // 清除发布目录
gulp demo:spirter // 自动生成雪碧图
-
注意事项
考虑到sass文件夹下可能会出现模块、公共目录，因此只会对
src/sass/一级目录下的文件编译推荐在每次使用
project:spirter命令前先使用project:clean命令清除dist目录，且只推荐在发布时使用project:spirter命令自动生成雪碧图
- 大作业源码
- 练习源码