gulp入门 - - 安装篇

Posted 2021-04-08 大敏的技术栈

一、安装流程

1、安装 nodejs(请参考http://www.runoob.com/nodejs/nodejs-install-setup.html)

(关于 nodejs 的知识可以去 http://nodejs.cn/ 或者 [w3c]http://www.runoob.com/nodejs/nodejs-tutorial.html 了解)

检查 nodejs 以及 npm 是否安装成功

$ node -v
$ npm -v

2、安装 cnpm

因为 npm 下载组件速度较慢，一般选择安装国内镜像

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

检查 cnpm 是否安装成功

$ cnpm -v

3、全局安装 gulp

$ cnpm install gulp -g

查检 gulp 是否安装成功

$ gulp -v

至止，gulp的安装已经完成，接下来我们通过一个简单的实验来实现 gulp 之 Hello World。

二、使用 gulp 构建项目

1、创建并进入项目目录

$ mkdir ch1
$ cd ch1

2、使用 cnpm 初始化当前项目

$ gulp init

这时需要你输入当前项目的一些信息，如果你是编写开源项目，请认识填写，如果尚未确定或者只是测试学习用，可以全部回车，跳过这个步骤。

执行完 init 命令后，当前目录会生成一个 package.json 文件，打开可以看到，刚刚录入的信息全部都记录在这个文件中，可以手动修改。

3、本地安装 gulp 插件

因为 gulp 的功能都是通过插件的形式来实现的，gulp 拥有自己的插件库，针对不同的场景，已经有大量的已实现插件，只需要通过本地安装，将该插件下载至本地，即可使用。

安装过程非常简单，只需要通过一个命令

$ cnpm install <plug-name> --save-dev

以 gulp 为例，本地安装 gulp 插件

$ cnpm install gulp --save-dev

注：
之前已经全局安装过 gulp 了，这里居然又需要本地再安装一次，这里需要搞清楚其中的区别。全局安装 gulp 是为了执行 gulp 任务， 而本地安装 gulp 是安装 gulp 插件，为了可以调用 gulp 插件的功能

三、使用 gulp 编码实现输出 Hello World

1、创建 gulpfile.js 文件

$ echo .> gulpfile.js

2、编辑 gulpfile.js

// 导入工具包
var gulp = require('gulp');

// 定义一个 gulp 任务，任务名为 test
gulp.task('test', function() {
    // 任务执行内容
    console.log('Hello World!');
});

// 定义 gulp 默认任务，任务名必须为 default
// ['test']表示：本任务依赖 test 任务
gulp.task('default', ['test']);

3、运行 gulp

$ gulp 

可以看到命令行会输出"Hello World"

也可以直接运行其它任务，格式为

$ gulp <taskname>

如果 taskname 不存在，则会执行默认任务 default，上面的操作就是 taskname 不存在的情况。

直接运行 test 任务，输出 Hello World

$ gulp test