00:00
好了,这节课呢,哎,我们再嗯升级一下,也是我们之前从对GS合并压缩CSS以及less到HT都进行过处理。那你想我现在有个问题。我改。那现在想要看到这个背景色,你现在是不是应该是去重新构建好,然后你还得去刷新,是不是才能看到。那接下来我们就申请一下,让他去帮我们干这个事情。先来看这啊,往下就自动变异了,这个时候我们需要用到一个插件,我会我发现我这有一行注释删掉了,这应该叫n PM install,然后呢,杠和杠什么leave reload,哎,就是当前的这个,然后你还要加一个杠杠C杠。Dev,哎,这也不知道你们下来应该是自己能敲出来这个吧,那我先需要这个插件叫live reload去帮我去,哎自动加载,那我先去下载一下当前的插件。
01:16
好,下载下来了,来我们来确认一下live read是不是进来了,进来了以后,接下来来你就要去注册一个live reload的方法,注册的话我们在这写玩一个live reload,这一次我直接就这样写了,好在这儿呢,我去引入这个。GA杠,他说没反应过来,你看。第二十一达。就是他没问题吧,因为我现在可以保证我拍监森里面不是都下载进来了吗?那在这引入,引入以后我们来注册一个,哎,监视任务。
02:04
好高点儿,哎。然后是task,在这起一个名字,我就叫它watch,那么你的揭示任务在启动的过程中就和我们ground一样,我应该是要求你你之前的默认任务都得先启动,所以我们会在这传一个参数,这个参数。放水啊。Default,这写到这其实和上午光子的理论是一模一样的,能理解吧,哎,就是说启动watch的时候是不是先启动他们之间?那接下来还有一个参数叫function。在这我们就不需要去写那些,呃,你比如说我们之前是不是上来要写一些return的这些。能逗好,那现在你应该是不用去写它了,现在我们要确定一点啊,Leave reload这个加法它可以作为对象使用,作为对象使用的时候LST,它有个方法叫listen。
03:08
啊,现在这个漏,我这一直反应不过来。嗯,这一步是干嘛的呢,叫。什么意思啊?对。开启接听,开启接听以后啊,然后我们需要用G点,或者说我先给他,呃,写点注释就是啊,不确认接听的目标以及。绑定相应的。任务,我们上午说GP里面有个API很重要,我们一直没用过,叫g.watch它呢传两个参数,第一个参数是你要确定的接听目标,比如说我先让他接听一下啊,我的GS文件。
04:02
当GS文件发生了变化的时候,第二个参数是一个数组,这里面放置的是什么呢?你要启动对应的任务,是不是就GS任务?能懂我的意思不?哎,那除了GS,你还可以再分开来写watch,那这个时候我可以这样写,也可以换成数组,数组意味着里边要放多个元素。Src下边CSS下边所有的CSS文件你还能呢再写。我这一把是不是要揭示所有的文件啊?当这两个文件发生了变化,我和大家说,我只放一个它就行。为什么说只放一个CSS就够了呢?你想你的CSS任务be完,最终的目的是不是还是要给我CSS任务最终去合并压缩?
05:01
那也就是说我现在只启动一个CSS任务就够了,为什么你看上面当我们启动CSS的时候,是不是必须要先启动LA啊,这样的话就是一块把它的任务就启动了。没问题吧,好,那接下来有了这些以后还不够。还不够。你还得在每一个任务的最下边去铺一个管道。啊,这个时候呢,就是说live reload,它还可以作为方法去使用,当它去调用的时候,这表示的是实时刷新。什么叫实时刷新呢?你想我这个watch任务揭示你的原目标,一旦你的目标发生了变好,我是不是调用相应的构建任务去重新打包编译啊?编译完以后,当用户去刷新界面看到效果的时候,我必须做这一步操作,意思就是把最新的效果给你提出到页面里。
06:04
再提出到页面里,在这呢,我提前,哎,我看那个东西我是不是关了。这不是这有个live load吗?我们先把这个给大家打开。你会发现这没有找到它,那么你在NPM这,你可以在这去搜一个啊,Livelo。回车。啊。这不是load吗?然后打开,嗯,往下就有教程,第一步教我们安装没有任何问题,接下来这个是什么意思呢?就是我刚说那个在每一个下面去铺的管道,你可以在那去看,看到这个没有。这不是注册了个last任务吗?这个最后边是不铺管道,哎哎,你看下面这都有说明,这一步是不listen开启接听啊,接下来watch,这其实和我刚刚写的是一样的。
07:00
能跟得上吗?Watch就是确认接听的目标以及绑定相应的任务。listen意思说我开始接听。哎,我现在和大家说一下,我为什么要打开官网给你们证明这个事情,其实你下来自己测,你不加进也能去刷新出来。但是为了安全起见,人家官网上都说要加了,所以你们最好还是加上它。哎,你们下来可以去测啊,这些东西呢,也都是自己一点一点可以测出来的。好,那这一步我现在在GS这铺上了,再在我们的less下面铺一个,然后CSS,还有一个HTML。管道也铺好了,接下来我们去执行相应的任务,咱们去看一下这一把,我去执行一个GAP watch。我为什么要执行望,我是不是没有把望放到我的默认任务里边,因为啥你执行默认任务就让它去单纯的去构建就完了,我执行W是不是表示开发的时候要监视啊?
08:05
走,你。看光标你就懂了。光标是不是停在这了,好,那么这个时候我去改变一个,比如说这来个什么呀。Yellow吧,CTRLS有没有发现下面变了?这个时候,我们来到当前的页面。一刷新哎,它是不是就变了,那这样的话是不是节省了我们手动去重新构建的这一项任务啊。哎,到现在为止,哎,这个呢,就实现了一个他可以帮你去编译的任务,但是呢,我在这儿叫他半自动。啊,我先把这个视频给大家再。
我来说两句