• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

浅谈自动化构建之gulp

其他 开心洋葱 1045次浏览 0个评论

一.gulp的基本使用

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

步骤如下:

yarn init -y

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

根目录创建gulofile.js文件(gulp的入口运行文件)

二.创建组合任务

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

浅谈自动化构建之gulp

三.异步的三种形式

浅谈自动化构建之gulp

 

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

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

浅谈自动化构建之gulp

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

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

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

yarn add gulp-rename –dev也可以重命名拓展名

浅谈自动化构建之gulp

六.gulp案例

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

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

1.样式编译

yarn add gulp-sass –dev

浅谈自动化构建之gulp

2.脚本编译

yarn add gulp-babel –dev

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

浅谈自动化构建之gulp

3.模板引擎编译

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

yarn add gulp-swig –dev

浅谈自动化构建之gulp

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

浅谈自动化构建之gulp

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

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

浅谈自动化构建之gulp

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

对于其它的文件 可以再定义个变量 这样编译过程不容易混淆 (个人感觉)

浅谈自动化构建之gulp

每次重新编译之前,安装清除del的插件进行删除操作。

yarn add del –dev  这个插件不是gulp的插件 所以单独导入。

浅谈自动化构建之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

浅谈自动化构建之gulp

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

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

浅谈自动化构建之gulp

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

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

我们可以通过一个gulp的方法,如下图所示红框中的构建注释,意思是通过gulp插件找到文件位置打包到一个文件中。

yarn add gulp-useref –dev

浅谈自动化构建之gulp

浅谈自动化构建之gulp

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文件代码如下:

浅谈自动化构建之gulp

浅谈自动化构建之gulp

浅谈自动化构建之gulp

浅谈自动化构建之gulp


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明浅谈自动化构建之gulp
喜欢 (0)

您必须 登录 才能发表评论!

加载中……