gulp入门(1)-安装篇

原文来自: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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 8,396评论 7 55
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 3,496评论 0 0
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 6,948评论 1 11
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 5,201评论 0 13
  • 生活是需要目标的,尤其是小目标。 这是我这几天最深切的感受。 去年年底我坚定地报了计算机二级的考试,为...
    星座爱好者阅读 2,695评论 0 1