00:00
大家好,我是学习园地的特约讲师高若峰。上节课呢,咱们看了多个入口和多个出口的一个情况,那这节课呢,啊,咱们来看一下,另外一个就是开始打包,而加资源,咱们说了外派默认它只能打包JS点后面是JS的和Jason的这样的一个文件,那么像RTML图片以及GSSS和SS这样的文件呢,都得单独的去设置去打包。那打包HTM资源呢和呃,打包CSS的用的是不是一个套路?那打包CTML我们直接用的是插件,咱不讲这个五大核心概念了吗?用的是插件,而CSS和sa less这些东西呢?呃,咱们用的是什么?用的是loader。来完成的,那loader呢,我们只需要下载使用就行了,而插件呢,我们需要下载引入再使用。那我说为什么HTML这个资源需要打包呢?用ipad。如果不打包的话,那你想象一下,我们在使用打包后的这个文件的时候,我们怎么使用呢?我们是不是在str文件里边,我们使用src这样的方式去用呢?对吧,反正这个打包是,呃,这里边是六啊。
01:11
你看是不是这样去使用的,然后我们一访问。对吧,F12你看。因为这里只有那个在控台。是这么去用的,对吧,但是我们不想这么用,那每次都这么用,我打包了几个,呃,文件,我每次都这么用,多麻烦呢,所以呢,如果我们将TML这个资源用外派D打包,那打包好的,那这个用这个插件去打包,首先呢,是这样的一个过程,那打包完之后的文件它自动会干嘛呀,会给我们引入我们需要的JS文件和CS文件。不用我们手工的去引入了,而且呢,也都给我们打包到这个目录下了,那我们直接把这个文件夹的内容拷走上线就OK了,而是不是说GSRC里边原文件又使一遍,打包之后的文件又使用一遍,不是那样的直接全打包在一起是这个目的。
02:00
所以呢,我们要打包而填补资源,另外呢,我们用这个插件,不光是他能给我们打包,还能给我们重命名,当然这是最基本的,那不光重命名还可以干嘛呀,还可以去给我们压缩RT文件,我们上线后的,比如说HTM文件里有一些注释对吧,有一些空格压缩对吧,压缩完之后那体积对吧。容量是原来的,比如说几分之几,这样的话,我们能让我们加载速度更快一些,是这样的一个过程啊,那我们看一下打包,那我们需要用到的,那肯定是什么,肯定就是这个插件,咱们一步一步来,咱们看一下啊。一步一步来啊,我们先使用这个插件,首先我们就得干嘛呀,就得安装对不对NPM。哎。Install吗?安装这个插件,这个插件呢,我们只需要开发的时候用它,不像解块上线的时候用,对不对,只开发的时候用,好安装一下。安装完插件,那我们第二步步干嘛,是不是得引用这个插件啊,等他装完啊,装完之后我们得把这个插件的引用进来,然后我们看怎么用。
03:02
装速度咱们得等一下啊。这个速度虽然我已经呃切换成淘宝的镜像了,但是呢。它一个一个文件下,它也是慢的好,装完了,装完了之后我们干嘛,我们需要通过快,当然了你可以通过ES6,那个我就不多说了,块使用DS。Qqu是这个引入这个文件,这个插件。装完之后,那你就在这个model里边已经有这个插件了,对不对,Model里边插件我们直接在这块引用就可以了,引用这个插件,它给我们返回来的是什么?返回来的就是我们需要的那个插件的一个方法,那我们接受这个方法。ST,所有接受对象和方法我们都准cos的,也是E的语法。然后我们将这个名称变成驼峰式的。W。P也就是HTML的外派的插件,当然这个名称你随便命名啊,叫什么都行,那我叫这个名呢,和插件名称一样的,当然方法名咱说命名是不同钢线的,所以呢,咱改成驼峰式的命名,当然在HV,呃,大写一下对吧,就可以了,那第一步这块是什么下载,咱们下载完了,第二步这块是引用。
04:14
插件。对吧,引用这个插件,引用完插件,那插件在哪用呢。你看。是在这里边吗?咱说了处理cslo的时候,咱们用这个,咱这用上load,所以呢,直接在插件这里边去,那怎么用,直接用这个构造方法就行了。你拿来。搬过来啊,直接用这个构造方法。他就可以了。那这个可以了,那有的说,那当然这里面数组里边不能用根号啊,对吧,变成逗号。那有的时候用这个插件直接就一个,那他把哪个HTM文件放到这里面去啊。默认它会创建一个什么,默认的这个构造方法就是。
05:00
默认怎么着会创建一个空的,不是我们自己写的HTML,它给我们创建一个空的,那创建空的目的干嘛呀?目的就是什么自。动会引入什么打包的资源,什么资源呢?就是我们说的GS文件呢,Csi文件就我们引入就不用我们自己引入了,来我们试一下外派。打包一下。你看这个,然后我们看一下这个目录下会出现什么,标个目录下你看出现音带尔TM,那这个音代尔TML,是这个音代尔TML吗?你看这个咱们自己写的,里边我有写几个字,使用压缩包对不对,而这个里边你看。怎么了?空的RTM只有HTM基本结构,然后自动把我们引入了,你看慢点JS。对吧,所以我们问一下这个打包的这个文件。你看里边没有说使用插件,但是呢,GS如果有CSSCSS也会给我们引入,你看就可以了。那如果我不用这个默认的,我想自己指定什么。
06:04
自己指定。我想打包哪个RM文件对吧。然后呢,生成什么样的文件名怎么办呢?比如说这个是我们自己写的音代了,然后呢,名称这个我不叫音代名,我可换别的名,那你就需要在构造方法这块加一个杰森对象的这样的一个参数,我可以敲开,对吧?那你可以让他使用模板,Tmp使用这个参数,哪个模板呢?我src下边就不让它建一个空的了,对吧?Src下面index.tml我使用这个模板。你看我使用这个模板。这个模板里边你看是有内容的。看到了吧,使用压缩包是这个,然后在这个模板里边,你知道我就不用手动导入了啊,保存一下,保存一下不用手动导入了,他使用这模板,在这模板的最后给我们加上我们打包的GS这样的GS和CS文件,来我们试一下。你看同样。
07:00
是这个,然后我双击这个,打开这个,你看使用压缩包,你看给我们加上这个,我们运行一下。一样的效果,F12看一下下边有打印120,因为这个包里边咱们就一个加法运算嘛,对吧,就可以了。是这样的一个过程,那我打包之后的文件名,不想叫这个名,先换一个名怎么办呢?可以,你可以指用文件名,这是杰森用逗号隔开,再写一个参数,叫做什么dial name对吧?那默认叫index,我不叫index的,我给它改成叫什么,我叫di.tml,我换个名称对不对?你要把它删掉,不然它我里边还有index,对吧,然后。运行一下。你看。在这里边诶。出现了点T,出现了这样的一个异变。看到了。所以呢,我们打包,而TML大家看一下这个过程使用的是这个插件,它可以帮我们打包放到那个我们打包好的目录里边,可以指定的列名使用这个插件对不对,然后呢,也可以自动帮我们加载,对吧。在内存中帮我们加载什么GS和CS这样的一个资源,但是呢,现在还没有CS,所以资源现在帮我们加载进来了,对吧。
08:06
就说就这一点功能吗?不止我们还可干嘛呀?我们还可以压缩GSTML,那GS咱压缩的说了,只要是你把它换成生产模式,它自动压缩了,对不对,这个咱们看好几次我就多看了,对不对,那如果压缩而TML,那我们需要干嘛呀?如果压缩成TML,我们只需要在下边在这个插件里边逗号,我再加一个选项mini。使用这个压缩默认是甲对吧,那我加个大括号,我这里边指定指定什么呢?我可以在这里边去移除。空格。把空格给它删掉,那使用一下cola的空格CP。白WT,呃,SPC处。把空格移,那这样的话,我这个打包的这个文件。这个文件现在你看这里边空格什么的都在,对不对,比如这里边我加空格。
09:04
这前面有空格。你看或者几行啊,你看是不都是空格括行对吧,包括这个下边是不是空格都是空格画行,然后但是我这里边再写,再写一个注释,我把这个。嗯。这两个吧,加上不是。都是。现在我只去掉空白,然后我们来运行一下。来,我们看一下这个DEMO,在这里边就变成了这种格式,你看还有空格吗?没有了对不对。你看默认什么?默认的话,把我们注释是不是也给我去掉了。对吧,使用压缩包。这里边使用压缩包后边。我刚才写错文件了。嗯,他写的这个文件里写到DEMO里面去。给我改了,写错文件了,我说为什么不试,他能给我拿去,你看写这文件,我重新写一下。
10:06
然后。空格,这前面有空格,当然了,还是加上本身你有多少空格,它都是一样,对不对。然后下面有两个。直接。刚才写错文件啊,放在这里边看一下,这个才是那个模板,你要把这个这个关掉。这个index的,咱再确定一下写没写错,在这index里边,你看的确是这个in对不对,默认是这个文件,它给我们变成这个文件名对不对来。你可以看一下这里边压缩前后的一个大小啊,这个我们再点开DEMO,你看注释它还在对吧,你看注释在。空格,那这中间的空格还在对不对,但是本身HTM结构的空格是不是都不在了,对吧,你看文字之间的这样的空格都在,但是HTM之间的空格对吧,都不在了,变成一行了。是这样的一个结构。那如果我想什么删除注释还可以删除注释。
11:04
两个工作都可以做啊。但是删除空格的时候,有时候要注意啊,有的时候你空格是调整结构的,对不对,就像比如说图标和文字之间有个空格,如果你这么去掉,它也会图标,假如说你用那个I希文放字体那个,它也会把那个去掉,所以呢,你要权衡一下。去掉空格。然后这块比如说移除入室。所以你要想全把空格移掉的话,那你就不能用空白来调整格式,你需要用实体安DSP那种去。去处理这个空格啊,不要用空格去排版,那样就麻烦删除注释,注释是com coms注释,然后t rue给个属性处,这样的话就会把空格也给我们,怎么样移出去。就是把这个注释啊也给我们移除,看里边还有注释吗?没有注释了,列成一行。看到了,当然了,你想看这个结构变回来,给你说什么快进来CTRL加L对吧,结果变回来当然了,你加速过了,你再变回,那有什么意义啊对吧,变成这样结构,你如果别人是压缩好的文件对吧,你把别人压缩,压缩好文件,你把它偷过来,然后自己去改,对吧,你可以使用这个办法。
12:12
对吧。不然的话不要去这样,但是你这压缩完之后,它空格它不已经也去掉了吗?那个注释不已就去掉了,对吧,所以这样的文件最终就会变成一个这样的文件对不对。好,这就是我们。给大家说的,而TML如何打包,它有哪几个作用,总结一下,可以压缩,可以一个空格,对不对,可以指定哪个文件,最主要的是打包的文件可以自动帮我们怎么着把打包好的GSCSS引入到这个TM中,不用手动去引入,这样的话我们只要把这个目录下打包好的目录下的文件直接怎么着拷贝到我们想要的地方就可以了,也都拷出去,但是你给删除,它会重新生成,那我们就可以使用了,好,谢谢大家,谢块们。
我来说两句