gulp入门(1)-安装篇

96
神秘者007
2017.12.22 21:18* 字数 610

原文来自:https://www.jianshu.com/p/6b3f14b3a5d1
<pre>

一、安装流程

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 初始化当前项目

$ npm 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
gulp