00:00
来,咱们开始上课,那接着咱们上节课来讲,上节课呢,我们对GS进行了合并压缩啊,先给大家测一个问题,还是一样的,你比如说我这是原文件,我去把现在这个console log fo这个注掉,也就是意味着我定义的函数没有去使用它,那么这个时候呢,你可以把这个Dis去删掉,它删掉了以后在这我去执行一个哎,G,然后带一个GS任务。好,他执行了没有问题,那这个时候我点击一下,哎,这个出来了,那你看合并这没有任何问题,而且这个确实是被注掉了,然后呢,你看一下这个压缩的文件。会发现又少了,原理是一样的,现在我们压缩的只是有第二,比如说TEST2这个文件的内容。而TEST1这个文件内容,你会发现没有了。一样的道理是他,哎自动化构建工具也是我们的项目构建工具GAP,它也是认为如果说你定义的函数或者说是变量不使用的话,哎是没有任何用的,它在压缩的时候,为了哎更加的使你的效果轻轻便。
01:15
你轻量哎,他会把这些东西自动筛选掉啊,这是我们要知道的内容,好,那知道了这些以后,接下来我们,哎在这节课咱们去整一下我们的CSS,也是对CSS进行合并压缩。首先我在这个CSS文件这啊,我先去创建一个test 1.css,然后呢,咱们再来一份,比如说我这来一个tests2.css。这两个文件里边的内容啊。我直接拿过来,还是给他一个ID好,宽高背景色,接下来再把这个啊给了我们的TEST2。
02:00
然后呢,我在这个less文件夹这,注意了,我是在less文件夹这,我去创这个,比如来一个test,三点后缀名一定要写对了,是点length。那这个时候呢,我把哎相关LAS代码拿过来,用LA的话有什么好处啊,说为什么要用这种预编译语言啊。这是干嘛呢?我是不是可以定义变量,定义变量是不是可以复用啊,其实Les里边还可以定义函数。这个知道吧,哎哎,这就是它的好处啊,你如果说只用CSS去写的话,是根本没有办法做到这件事情的。好,有了这三个文件以后,我接下来先去下载一下插件,大家看我下载是哪一个。GA-less当前的插件专门用于转换LAS的语法,为CSS对lesss进行编译。而第二个插件叫可利的CSS,它专门用于去压缩我们的CSS文件。
03:09
哎,上节课咱们也有讲到过,那我呢先去把这两个插件去下载一下。好,下载完了确认一下,哎,确认一下,那这个时候这几个还有这个let下载进来了,进来了以后,我们要做的第一步操作是在我的,我先把这些GS文件关关几个吧,太多了。在我的GA file里面上来,你应该是先把对应的插件引入进来。哎,我们刚刚下了一个是不是叫做less来块,那这个时候在这我应该是叫GA-less,然后还有一个521个这一版我还没有野带大家看一个东西啊。
04:05
你看一下我这个插件和其他插件有什么区别。其他插件是不是直接杠,就是我当前插件的这个名字啊,而这个是不是两个杠,那这种起名字click CSS,我通常哎起名字你起什么都无所谓,我能不能这样起。就用小头风命名法嘛,CSS clean表示一下,这个时候你去引入一下GA clean CSS没问题吧,好,这两个插件有了以后,接下来我们就可以继续的再次,哎,你比如说我先来去注册一个任务注册,哎。转换less任务。嘎点,大家说下面的套路怎么写?哎,这些东西只要说你能跟着我这个走通了啊,自己写没什么问题,战士们要放一个任务名。
05:05
接下来整一个方式,那在这第一步写什么很好return呢?下边套路是一样的。然后调用g.src,是不是要去找它的原文件啊。在这儿来写一下src下边。Less,下边新点less,虽然说我们现在只有一个。我这个是不是也能找到他,找到了以后,接下来你想做任何操作,是不是得先去铺管道。这里面怎么写,刚刚是不是引用个less,它以调用注意了啊,有的同学可能会搞不清楚,我什么时候用干带一个方法,什么时候不用GAP。你只好记啊,你只需要看你当前用的方法是插件给你填供的方法,还是你要用干这个对象里边原生的API知懂不这些插件的方法,这个时候不需要用干去代,所以我在这是不是直接写了个less。
06:08
当前的操作就是说编译less文件为。CSS文件编译完了以后,你是不是要去输出。输出的话,问题来了,怎么写?got.desk好,里边是不是要传一个路径啊?你说我问下大,我应该是放到哪。放到Dis下边,然后再去给它创建一个文件夹吗。呃。创建CSS文件夹。哎,能想到创建CSS文件夹就挺好的,但是有没有想过一个问题?我现在是先去注册了个less任务,那也就意味着你马上转换完是不是和我的CSS文件一样。
07:05
可是你转化完了,你接着还要想一个问题,也是你下面还有需求,你得去针对CSS文件进行合并压缩。那这个时候你less转化为的CSS,是不是也得跟我已有的这些放到一起,然后我再对他们统一的去合并压缩啊?能懂我的意思吗?那这个时候你不能放到D组下面,因为我待会儿是不是要找这个CS下面这些东西啊。所以我在这儿应该让他输出到。CSS下面。能懂不?现在大家看我有没有给他重命名,或者是我手动去改这个后缀名为CSS呢?没有,我先给大家执行一个任务,就叫杠杠less,空格less。他是不是执行了,然后。你会发现不需要改名字。
08:03
你想改也能改,现在为什么说不需要改,你原来是不是叫test3.less啊,当它转换完less文件为CSS的时候,它会自动的将你这个后缀名换成什么。CSS,而你的文件名是不是还是用我用我之前的这个。然后我们进来看看有没有变异成功。这不就转换完了吗?哎,这是两个class类,哎,你对比原来的这不是这两个类吗?只不过是我这个第一个类,它用的是我提前定义好的一个变量吧。哈,转换完了以后,哎,注意这两个类分别要设置两个字体字也是color。那编译完了这个Les以后,接下来我们再去注册一个任务,那注册之前我先把这个视频给大家看。
我来说两句