浅谈自动化构建之gulp

一.gulp的基本使用

gulp是目前最流行的前端自动化构建系统,核心特色高效易用。（这块不过多的废话了,直接上干货了，有兴趣的话，能够查下gulp简介）

步骤以下：

yarn init -y

yarn add gulp --dev //安装开发依赖

根目录建立gulofile.js文件（gulp的入口运行文件）

二.建立组合任务

除了建立普通任务,gulp提供了一些建立组合任务的api，好比series,parallel

三.异步的三种形式

 

四.gulp压缩代码构建过程的核心工做原理

经过底层node的api实现过程.读取-转换-写入

五.gulp文件操做API+插件的使用

专门建立读取流和写入流的api,相比于底层node的api更增强大，也更加实用

yarn add gulp-clean-css --dev 安装压缩文件的转化流

yarn add gulp-rename --dev也能够重命名拓展名

六.gulp案例

本案例想经过gulp转换sass,es6,html,image,fonts等转化为压缩编译后生产的制定格式。

首先安装gulp依赖,yarn add gulp --dev

1.样式编译

yarn add gulp-sass --dev

2.脚本编译

yarn add gulp-babel --dev

yarn add @babel/core @babel/preset-env --dev

3.模板引擎编译

这里使用的模板引擎叫作swig,编译成html

yarn add gulp-swig --dev

可是从上面挨个编译的话 不方便，建立组合任务，同时运行，使用parellel同时运行三个互不干扰的任务

4.gulp案例-图片和字体文件转换

yarn add gulp-imagemin --dev //压缩图片,字体文件

5.gulp案例-其余文件及文件清除

对于其它的文件 能够再定义个变量 这样编译过程不容易混淆 （我的感受）

每次从新编译以前，安装清除del的插件进行删除操做。

yarn add del --dev  这个插件不是gulp的插件 因此单独导入。

6.gulp案例-自动加载插件

若是说引用gulp的插件太多,挨个require的话不利于后期回顾代码，因此建议采用自动加载的方式加载插件

yarn add gulp-load-plugins --dev

用法为const loadPlugins=require('gulp-load-plugins')  const Plugins=loadPlugins()

例如:require('gulp-sass') 下面的引用为Plugins.sass

若是为require('gulp-sass-xx') 下面的引用为Plugins.sassXx（采用驼峰命名法）

7.gulp案例-开发服务器

yarn add broswer-sync --dev

8.gulp案例 监听源代码变化以及构建优化

借助gulp里面watch api,经过监听源代码的变化，自动编译到dist目录

9.gulp案例 useref文件引用处理

对于dist生成的html文件中遇到引用本地路径的状况，好比引用node_modules路径下的css文件，这时候生产上确定是不能用的,

咱们能够经过一个gulp的方法，以下图所示红框中的构建注释，意思是经过gulp插件找到文件位置打包到一个文件中。

yarn add gulp-useref --dev

10.gulp案例-文件压缩

yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev

因为是三种类型的压缩插件（html,css,js）要加下gulp-if的插件要安装依赖

yarn add gulp-if --dev

完整的gulpfile.js的注释文件及package.json文件代码以下：