基于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 -g1、命令行下切换到用于开发的目录,这一步首先要初始化工作流的运行环境,在该目录下执行
$ 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模块管理
- 自动发布至指定路径