快速入门
这一节你不需要知道背后的原理,只需要按照文章中的提示一步一步进行操作。
我的所有开发都是在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脚本来执行。这些,我们都将在这本手册里一一提到。