gulp入门（1）-安装篇

原文来自：https://www.jianshu.com/p/6b3f14b3a5d1

 
 
一、安装流程
 
 
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  --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 不存在，则会执行默认任务 default，上面的操作就是 taskname 不存在的情况。
 
 
直接运行 test 任务，输出 Hello World
 
 
$ gulp test