日照网站建设_项目中使用任务处理器的好处

在网站建设项目中使用任务处理器的好处

初始接触 Grunt 是在一个大型的现成的代码库中，它有众多的模块和抽象的代码组织方式，因此对新手来说不容易理解。然而，经过一段时间的学习，能够修改部分代码，甚至添加一些新的功能进去。

然后，开始分解项目，移除一切能够移除的东西，直至剩下可运行的小基本框架和基础配置。这时，能理解项目中的每一行代码，并且可以用自己的方式在项目中实现更复杂的功能。下面是一段用于编译 Sass 的简单的 Grunt 代码：

上面这段代码的作用是把你的 style.scss 程序代码编译成 style.css，可以分为如下三个部分。

加载任务

　　Grunt 需要知道加载哪个 Node 任务到编译流程中。如果你直接加载 package.json 中的所有的包，那么 load-grunt-tasks 模块将会减轻你的很多负担。

设定配置

　　每一个加载的任务都有一系列可以配置的选项。在这个例子中，我们只是配置了 Sass 任务的源地址和目标地址，实际上还可以打开或关闭 sourcemaps、设置额外的包含路径，或者改变输出的 CSS 格式。每个任务都可以有不同的写法或者目标。你可以设定一个打开 sourcemaps 和输出完整代码的配置用于开发环境，然后设定一个关闭 sourcemaps 和输出压缩代码的配置用于线上环境。

注册自定义任务

　　在这个环节，我们可以把各个独立的任务整合到一个自定义的父级任务中。default 任务是运行 grunt 指令所执行的默认任务。你可以在 default 任务中添加更多的任务，比如 Sass Lint，也可以新建其他自定义的父级任务，比如 test 或 deploy。

现在用 GulpJS 实现同样的功能：

Gulp 定义任务的方式跟 Grunt 有所不同。从脚本中你就能发现它们在代码风格上大相径庭。Grunt 基于配置使用对象的符号，在一个地方定义任务，然后在另一个地方执行任务；而 Gulp 把任务和配置连在一起，使用管道的方式，把代码从一个操作传递到下一个操作。接下来分析一下这段代码。

加载模块

　　与 Grunt 使用 loadNpmTasks 不同，Gulp 使用传统的基于 Node 的 require() 语法。因此一开始我们就把 gulp 和 gulp-sass 加载进来，并保存到变量中供后续使用。

创建自定义任务

　　这里再次使用了 default 任务，表明运行 gulp 时会发生什么。不过，我们并不是使用 grunt.registerTask 来列出所有想要执行的预定义任务，而是在函数内部来构建完整的处理流程。

Gulp的优点

　　Gulp 方式倾向于使用小而并行的函数，这些函数往往先是收集资源，然后通过几个管道处理，把结果输出到目标环境。

它主要有两个优点：

一、并行执行的方式意味着在处理 Sass 的时候，不会阻塞其他任务的运行；

二、管道的方式让 Gulp 可以连贯地对一个资源进行多个操作，而不是像 Grunt 那样，需要把输出的 CSS 保存到一个临时目录，然后再对这些临时文件进行二次处理。