02. 尚硅谷_自动化构建工具Grunt_入门介绍02.avi原创

嗯，知道了这些以后来到我们的啊，这个项目里边。首先呢，这有三部分，Prepare是写好的，Work是咱们课堂上要敲的。下面还有个教程，就是针对我们当前三个构建工具啊的一个教程。我打开这个work，你会看到有三个空的文件夹啊，我们先来整第一个，那整的时候呢，这有个教程，咱们先来看，第一个叫ground。啊叫上面这些呢，我都给大家列了一些东西啊，就自动化构建工具这个先不用看啊，Grant官网上也说了，你上来第一步应该是去查一下米note的版本。它那个里边现在没列出来，我记得他之前，呃，看这有，他说no必须大于等于0.8，我现在是8.0，所以说这个不是咱们关心的啊，没有问题好。接着来看，那接下来我们要根据咱们的降程去创建一个目录结构，哎，大家又看到这个BI要的，我是不是提到过，有时候我们能看到第有时候是不能看到be的啊，它都表示是你编译生成完的文件吧，那在这这个空的啊目录下我去呢。

创建一个BI的文件夹，然后呢，再来一个叫src，它呢表示的是原文件。那在这个下边，我去创建一个GS文件，专门用来放放置我们的GS，再来一个。CSS，然后呢，在外边我去整一个叫index.html，就是整一个我们的页面。好，整完这些以后，我呢，先去整一个package，杰森一看到这个，意味着马上我又要去下载包好来在这。整一个吧，PA package杰son，那么在这里面呢，我去写一下，比如说这一把叫哎，来test我问题了，我写成这有毛病吗？

你现在用的工具，你马上肯定是要去下载它了。你如果是这样，我保证你下载下来。一直报错啊，一直报错是因为你起的报名是不是和你要下载那个报名有冲突，所以呢，我给他这加一个test，这一点毛病没有。那接下来我们去安装一些东西。这个官网上也有啊，咱们就直接在这看了，当大家看到这个的时候，哎，你得知道这个c Li是干嘛的。咱们讲过。干嘛的？想它的全称叫command line interface叫命令行接口。和你的输入的命令是要对接的。你最终下载完是不是要去执行一些命令？

那么它和那个B一样，也说我ground里面有各种各样的命令，如何确保出调呢？你得通过什么ground cli去帮我们调，而这个时候是不是需要大家去全局安装一次，为的就是安装完以后再不用去操心这个事情了。那接下来我们还需要安装什么，看着。哎，这叫局部安装，又看到D了，说明它是一个。开发依赖的工具其实也好理解，你当前的我们要学的工具叫项目构建工具。而我们刚才能清晰的看到，它是对GCCSS进行合并压缩。合并压缩这个工作你要考虑他在什么时候去干。你开发完你的代码合并压缩，压缩完我是不是要去拿压缩的文件去上线啊。那在上线那个动作执行的时候，其实我压缩的任务是不是已经完了。

也就意味着group这个工具已经干完活了，那么它就是一个开发依赖的工具，那这个时候我呢，先把它在我们的当前的项目里面去下载一个。再强调一遍，虽然说这个东西呢，大家都听过啊，我再说一下，你看我当前的项目里面有no modules那个文件吗？记住了，上来是不是没有？什么时候会出来呢？你去n PM install下载包的时候。你下载完的包会自动放到这个no modules这个文件里面。没问题吧？来转一转，它就快点。你觉转圈真的快吗？之前有个女生问我说老师，这个转一转，这这是设计的吗？我说我就是等待着无聊哎。

咋想的？好，来，我们来确认一下ground下载下来。没问题进来了，那么ground一旦下载下来以后，大家看着啊，它会自动多了一个命令，就叫我先去执行一下，看看会不会报错。报错的意思是提示你既不是内部命令，也不是外部命令，能懂不来走你。提示那个既不是内部命令，又不是外部命令吗？没有，但是你看他这说了一句话，Unable to find。这个已经是你们第二次看到了。咱们上来官网上，哎，能看到你是不是要有一个ground field的配置文件。而我刚刚在教程里面，我故意把它跳过去了，这得设置设置一个它。现在我说一下这个ground，注意它是一个GS文件，它有什么用？

它呢，同那个BRC的作用差不多。就是说我grant再去执行任务的时候，他上来就去读这个文件。而我所有要执行的任务，就是在这里面去配置。说白了，他得问他，你让我去干什么活，要不然我不知道。要不然我不知道，那这个时候我们得去配置一个叫groundfi的文件，注意了，它放置的位置也是在根目录下。还有个小细节。Groundfield首字母一定要大写，为什么要强调这个？接下来我们要学的GAP还有onepa里边它俩都是小写啊，有的同学呢，经常在这儿容易犯错误啊，那这个时候我呢，先来在这儿。配置一个光field GS文件。那这个里面到底配置什么东西呢？你看教程也行，看他这你比如这边有快速入门吗？往下看。

看到这个没有叫groundfi，哎，下边呢，有一个groundfield文件案例，就这一堆，我先给你拿过来。你要会看它的官网最好。放到这儿，放到这儿可能有的同学说一下看不懂，那我们先把这些没必要的全部删了。啊，全部删了，那这样的话，你先看外边当前的GS文件，其实也是一个什么模块。这没问题吧，你一看到这这个model的export出去干嘛？去暴露模块吧，而且他上来是么？说明它内置支持什么common GS这种。模块化的语法。这没问题。而且要注意它暴露出来一个什么函数，哎，在这呢，有一个特点，在我ground这个ground fair里面，它函数是不是要提前声明一个行参啊。

最终我ground会自动注入进来一个ground对象，这个呢就有点像我们安格拉GS里边那个包福。School学知识点一定要结合着去，哎，前后对比哈，更更好理解一点。那在这个里面就是对我们ground任务的一个配置，往大的来说，其实它一共就分为三步，第一步in conflict应该能懂in it是不是初始化，哎，在这呢，就是。初始化。配置任务。那这一步。看着load是加载的意思，N PM task，你看后边这这是个什么东西啊。其实我们刚刚给大家看一个它是不是叫插件，哎，刚刚我们搜了个country，其实这些插件它都是以ground来开头，待会我们能看到啊。

在这它主要是干嘛呢？也就是说当ground哎任务执行的时候去哎加载对应的。任务插件。任务插件。那这样我们现在先不用我呢，先把它，嗯。注意记住了这一步，在你哎真正去运行的时候，这一步肯定不能少，否则的话，你对应的任务执行不了。下边这一步register什么意思啊？我们经常能看到一个哎。看到一个就是你比如别人说，比如说你登录那个gib上面是不是有log。登录。注册。在这是注册任务，注意看官网上给你的，上来是devot，也说在这我们是去注册啊，Grant的默认任务。

那现在这没有任务，我们先把它删掉，默认的意思是表示啊，就是光头的默认任务，后边这个数组的意思是说你执行默认任务的时候要依赖任务，到时候我一执行前面的任务，后边的就自动开启。那现在写完这些以后，我呢，再给大家去执行一个grant。走，你。他还会有刚才这个提示吗。他是不是可以提升一个当的，当的意思就是任务干完了。那是因为他找到这个文件了，只不过是我现在没有去让他执行任何的任务而已。哎，就是这么点东西，那接下来我们在这个教程里面往下来看。嗯，接下来呢，给大家这儿我也列出来了，其实你们不看这也行，自己会去官网上找最好。

接下来给大家介绍一下ground常用的插件啊，我们要学的是团队官网提供的插件，那他们有个特点，都是以con开头。而这些插件斜边两分都一样，第三部分其实就是告诉你我插件能能干什么活，大概能看懂。clean通常表示清除的意思，在这他就可以帮你去清除文件。那再来看con这个单词什么意思啊？合并啊，在这呢，我就可以去合并多个文件到一个文件中，Uglyify这个可能大家不知道，它可以去压缩GS文件。哎，Ugly呢？它执意是是什么什么变丑陋的意思。看到没有加什么什么丑话，为什么要用这个单词呢？你想，咱们开发的GS本来是条理很清晰的，咔咔啊，一行一行的往下写，最终一压缩，压缩成什么了？

是不是一行了，哎，面目全非也说，尤其那些形差都给你变了啊，所以他起了个叫哎GS hit刚刚在官网上我们也见到过。这个插件可以去帮我们做GS的语法检查。还有什么CSS，一看到这个me呢，这些这是什么意思啊。我们压缩文件是不是有个特点，哎，你正常文件名字后边有个后缀叫点me，哎，他们通常表示就是压缩文件。这个压缩CS压缩HTML这些啊，原理都一样。Copy是复制文件。还有这个。Want通常表示什么？你如果说没学过开发，一看到watch看，但是在我们，哎程序员的大脑里面，一看到watch，通常表示的是监视的意思。

监视的意思，这个插件可以干嘛？实时的监控文件的变化，调用相应的任务。什么意思呢？你去开发完一个项目，我很有可能先去打包。合并压缩了，而我们真正跑的是压缩的文件。那这个时候呢，很有可能你还要去改原文件。改完原文件，你想看效果，那如果说没有这些东西，就像我们昨天学的，你得手动去重新打包编译。而有了这些插件，他如果他可以帮你去揭示，如果说他发现你的原文件发生变化，不用你去打包编译，人家帮你去调用对应的任务来提高你的效率。