gulp+webpack+babel+css压缩模块 实现自动构建工具

Posted by Yinode on Friday, November 24, 2017

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时添加的参数


Markdown

要理解流的概念,文件是一种流,它可以被做各种处理,

注意的是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目录 所以需要放置到同一个数组内 并且位置一定要在最后