快速入门

这一节你不需要知道背后的原理,只需要按照文章中的提示一步一步进行操作。

我的所有开发都是在ubuntu上面完成的,所以本文档中可能会涉及一些ubuntu linux下的一些命令,如果你不接触ubuntu,甚至不接触linux,都没有任何关系,因为我们是要用gulp,而不是在纠结命令,而且在后面的文档中,我会对大部分命令进行解释。

gulp是node的一个模块(包),因此大部分情况下,我们通过npm进行安装。当然,高手而言,甚至可以下载包,手动进行安装。熟悉npm的朋友,也推荐了解一下yarn,它也是个包管理工具,但是效率上比npm高效(快)。

现在,我假设你手上有一台拥有开发环境的ubuntu16.04LTS,但是还没有接触node,我会手把手教你一步一步完成安装。

1) 安装node

$ sudo apt install nodejs

假如你的ubuntu不支持apt,可以替换为apt-get。

2) 安装和升级npm

$ sudo apt install npm
$ npm update -g npm

3) 安装gulp-cli

gulp-cli就是可以在命令行中使用gulp default这样的命令的工具。也就是说你不安装gulp-cli,就无法在命令行里运行gulp相关的命令。

$ npm install -g gulp-cli

为什么不是安装gulp呢?暂且按住不表。

4) 创建一个项目

$ mkdir my_project
$ cd my_project
$ npm init

在出现的交互信息中,填写和你项目相关的信息。

5) 把gulp作为这个项目的一个依赖

$ npm install --save-dev gulp

上面我们留了一个问题,说为什么上面安装的是gulp-cli,而不是gulp。这里就有答案。

我们npm install的gulp将会被保存到my_project这个目录下的node_mudules目录下去,package.json文件的dependencesDev字段也会被增加一个gulp的记录。

这是因为npm install gulp时安装的gulp是一个node模块,是一个项目依赖的包,我们将会在自己的项目代码里面用var gulp = require('gulp')的形式引用这个包,而这个包,才会是我们下面API一章中的所有api的主人。而gulp-cli,在这里没有半点关系,cli真的只是一个命令行工具,而不是我们用来require的东西。

6) 创建一个gulpfile.js文件

var gulp = require('gulp');

gulp.task('my_task', function() {
  setInterval(function(){
      console.log('I am out!');
  },5000);
});

7) 执行gulp任务

$ gulp my_task

这个时候,你就会发现,在你的命令行里面每隔5秒出现一下'I am out!'这句话。使用Ctrl+C退出来。

通过上面这些步骤,你可以轻松快速的创建自己的gulp工具,在你的项目里面使用gulp工具帮你自动化的完成一些任务。比如举一个简单的例子,你可以在你的源代码里面写ES6的代码,通过gulp的一系列处理,自动生成一个编译成ES5的js文件。当然,大部分任务都需要使用插件,或额外编写node脚本来执行。这些,我们都将在这本手册里一一提到。

results matching ""

    No results matching ""