TOC
第一步 环境搭建流程
以下均按照流程
创建工程目录
C:.
├─.idea
├─app //开发目录
│ ├─.idea
│ ├─css
│ ├─doc
│ ├─img
│ ├─js
│ │ └─vendor
│ └─views
├─server //展示引擎目录
└─tasks //任务中心
express基本搭建
express是一个基于node.js的应用框架
在sever下运行以下命令
npm install -g express-generator #安装express命令行工具
express -e . #生成标准文件
npm install #安装模块库(依赖package.json)
建立解析脚本目录
C:\Users\zhang\WebstormProjects\ES6\tasks
λ mkdir util
C:\Users\zhang\WebstormProjects\ES6\tasks
λ cd util
C:\Users\zhang\WebstormProjects\ES6\tasks\util
λ touch args.js
创建主目录的pkg.json
C:\Users\zhang\WebstormProjects\ES6
λ npm init
C:\Users\zhang\WebstormProjects\ES6 (es6@1.0.0)
λ touch .babelrc
C:\Users\zhang\WebstormProjects\ES6 (es6@1.0.0)
λ touch gulpfile.babel.js
到现在为止基本的工程目录已经完成 剩下的就是编码的过程,让整个自动化过程跑起来。
第二步 编写配置文件
中间省略很多 具体的配置文件在DEMO中会展示,这里就不贴了
为了更好的理解gulp,我尝试分析一下gulp的运行过程已经文件的作用,首先看一下现在tasks的目录结构和具体作用
<ES6>
├.babelrc #babel的配置文件 用于编译js
├gulpfile.babel.js #gulp的第一入口
├package.json>
├<server>
│ ├app.js
│ ├package.json
│ ├<bin>
│ ├<node_modules>
│ ├<public>
│ ├<routes>
│ └<views>
├<tasks>
│ ├browser.js #监听app下的文件改动,并调用刷新
│ ├build.js #gulp的第三入口 调用所有的文件
│ ├clean.js #用于删除目录
│ ├css.js #用于移动css到public
│ ├default.js #gulp的第二入口 调用build
│ ├pages.js #用于重新移动到public和进行刷新
│ ├scripts.js #编译js 移动 并刷新
│ ├server.js #开启服务器 并监听文件改动
│ ├<util>
args.js #保存我们gulp时添加的参数
要理解流的概念,文件是一种流,它可以被做各种处理,
注意的是gulp的dest移动某些文件是连带父级目录的 千万注意!
第二要注意的是 如果你的gulp使用了ES6的模块语法 就必须要把入口文件gulpfile.js 改成gulpfile.babel.js 这样gulp就知道你这个用了ES6 他就会去调用babel先编译你的js
第三
app.use(express.static(path.join(__dirname, ‘public’)));的意思是所有静态文件的请求都会加上app.js的路径 加上 public ,所以/css/xx.css 的请求才会被正确返回
第四
当你合并文件并压缩的时候 会丢失那个附带的父文件夹
第五
如果有两个以上的监听任务需要放置到gulp-seq的参数数组内部,不能单独存放,后面的会无法运行
gulp.task("build",gulpSequence("clean","pages","css","img","script",["server","browser"]))
这里server其实是监听server目录和启动expres的地方 browser监听app目录 所以需要放置到同一个数组内 并且位置一定要在最后