基于gulp4.0的前端构建工作流,主要提供以下几个功能:
- scss预编译,暂不支持less,未来可加入
- 自动拷贝和提交svn
- 上传ftp
- 自动生成预览文件
- 开发模式:启动内置server:http://localhost:3000,监控文件变化,只编译修改过的文件,livereload
- 编译html文件:替换静态资源路径,编译指定图片为base64方式引用
- 压缩图片:基于目录的压缩,指定图片目录,或者压缩整个目录
- 发布模式:自动合成雪碧图,压缩所有的css,压缩所有图片(可选择编译所有文件和只编译更改过的文件)
- 命令行es
nodejs,gulp4.0
如果本机有安装过gulp,先卸载它
$ npm uninstall gulp -g
然后安装gulp4.0
$ npm install "gulpjs/gulp#4.0" -g
然后
$ npm install easy-workflow -g
1、命令行下切换到用于开发的目录,这一步首先要初始化工作流的运行环境,在该目录下执行
$ es workspace <dirName>
2、等待命令执行结束后,请按照命令行内的提示执行npm install命令安装所需依赖或者直接下载我打包好的node_modules
$ cd <dirName>
$ npm install
运行环境目录结构如下
|- dirName ---------------------你刚刚执行workspace命令后面指定的目录名字
|- common-scss-module -----------存放scss基础库 mixin和reset等公共scss模块
|- node_modules ---------------模块依赖
|- tasks ---------------存放gulp运行的所有task
|- package.json ---------------gulp的所有依赖
|- readme.md
3、在运行环境安装完毕后,就可以初始化开发环境了
$ es init <dirName>
在这一步会生成若干文件,今后所有的构建文件的开发都会在这个目录下进行,这么设计的目的就是为了省事儿,譬如我有很多个开发目录,我就不需要
在每一个开发目录下都生成一份node_modules,所有的依赖都在父目录的tasks和node_modules里了。
eg:es init demo,那么:
开发目录结构如下
|- dirName
|- common-scss-module -----------存放scss基础库 mixin和reset等公共scss模块
|- demo -----------刚刚生成的开发环境目录
|- css -------------存放scss文件
|- img -------------存放所有图片
|- js -------------脚本
|- slice -------------存放所有icon,用于合成雪碧图
|- .easy-workflowrc -----------配置文件
|- gulpfile.js -------------gulp执行发起文件
|- node_modules -----------------模块依赖
|- tasks -----------------存放gulp运行的所有task
|- package.json -----------------gulp的所有依赖
|- readme.md
在开发的时候,只需要在demo目录内执行gulp相关的几个命令即可完成开发
- 1、推荐使用webstorm这个IDE,内置了grunt和gulp,可以比较方便的执行命令,这里下载webstorm
- 2、开发阶段,在开发目录下,执行gulp develop命令,开启开发模式
$ gulp develop
- 3、在html目录下新建xxx目录,再在该目录下新建xxxx.html文件,引用css,引用图片......
- 4、推荐使用按目录区分业务的方式,即不同的业务划分不同文件夹,清晰,详情见目录下的readme.md
- 5、打开浏览器,输入http:localhost:3000/html/xxx/xxxxx.html即可开始开发,在文件修改后浏览器会自动更新内容
- 6、css目录下的scss文件名字也是按照业务命令xxxx.scss
- 7、img,slice目录下的图片,按照scss文件的名字划分目录,这样便于浏览以及工作流程序查找文件,参考如下结构:
|- css
|- accident.scss
|- img
|- accident
|- img1.png
|- img2.png
.....
|-slice
|- accident
|- arrow.png
|- arrow@2x.png
|- arrow@3x.png
.....
{
"devDest": "./_dev", // 开发模式下,存放编译后的开发文件的目录,html文件中的静态资源应当指向该目录
"releaseDest": "./_release", // 最终编译文件存放目录
"debugDest": "./_dev", // debug模式下存放文件的目录 TODO
"imageMinDest": "./_imageCompress/", // 压缩图片命令存放压缩后图片路径
"autoPreview": false, // 是否自动生成预览文件,在编译后,即执行release命令
"compileHtml": true, // 是否自动编译HTML文件,TODO
"htmlReplacePath": "/static/style/app/publish/", // 编译html文件时,自动替换资源路径
"svn": {
"copyPath": "relative/path/xxxx", // 在执行release后,将编译后的文件copy至该目录并提交
"autoSubmit": true,
"comment": "commit css&image" // 静态资源提交日志
},
"ftp": {
"host": "xxx.xxx.xxx.xxx", // ftp的IP
"port": "xxx",
"remotePath": "/data/www/xxxx/xxxx/style/xxxxx", // FTP路径
"username": "xxxx",
"password": "xxxxx",
"autoUpload": true
},
"preview": {
"host": "xxxx.xxxx.xxxx.xxxx",
"port": "xxx",
"username":"xxxx",
"password":"xxxx",
"remotePath":"/data/www/xxxxx"
},
"cdn": {
}
}
- 配置完善
- 生成操作日志,并有页面可以访问查询
- css模块管理
- 加入js编译以及js模块管理
- 自动发布至指定路径