gulp初体验

最新推荐文章于 2021-04-01 15:03:31 发布

原创最新推荐文章于 2021-04-01 15:03:31 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

gulp概念介绍

不要被上面的LOGO误导为gulp是一款饮料，其实gulp和grunt的一样，是一款专注于前端项目的构建工具。

gulp与grunt最大的不同可能是gulp引进了管道流的概念吧。这使得gulp构建运行的速度快于grunt了。除此之外，像官网标榜的那样，gulp还有其他的特点比如运行效率高、插件质量高、容易学习、容易使用。

我觉得gulp和grunt相比，没必要非得确定哪个是最好的，哪个用的习惯就使用哪个，我最先学习的是grunt，后来慢慢也接触了解gulp，觉得除了语法层面外，gulp和grunt相似度还是蛮大的。学会gulp作为知识的储备也是不错的选择。

安装gulp之前要学会安装node，可以参考我前面写的文章做好一些预处理工作。

gulp简单示例

安装全局gulp

npm install --global gulp

创建根目录和必要文件

选定一个目录，作为这次的测试的项目根目录，目录创建完之后，在创建gulpfile.js和package.json,前者是构建命令所在文件，后者是构建项目依赖的包。

gulpfile.js的代码如下：
var gulp = require('gulp');

gulp.task('default', function(){
    console.log("hello, gulp");
});

代码很简单吧，目的就是在控制台输出“hello, gulp”，如果没出错的话，那么标志环境搭建好了。
package.json

{
  "name": "yulp-task-project",
  "version": "0.1.0",
  "description": "test",
  "devDependencies": {
    "gulp": "~3.8.8"
  }
}

依赖包中仅仅依赖gulp,实际项目中依赖包肯定不只一个。

安装依赖包

进入项目的根目录，在根目录下运行以下命令：

npm install --save-dev

这个命令会把package.json下的依赖全部安装，不错意外的话，项目的根目录会创建一个node_modules目录，这个目录安装的package.json的依赖包文件。

测试运行

见识所需依赖安装成功了，那么可以测试运行了。进入的项目的根目录，运行下面的命令：

gulp

或者

glup default

如果控制台程序，出现我们预期的“hello, gulp”，那说明gulp能正常运行。这为我们后面进行更复杂、更繁琐的构建打好了基础。

gulp的核心

要想把gulp学好并且灵活运用，有两点是很重要的，第一是要学会gulp的语法糖，gulp的语法和grunt相差很大，简直可以说天壤之别，所以从grunt迁移到gulp还是要花点心思，后期会专门写篇语法糖入门文章。第二要学会gulp插件的运用，gulp或者grunt的强大并不是本身，而是依托其庞大的插件平台。所以学会插件的用法是gulp学习的重中之重。