来来来,写写使用Gulp工具的几个基本的入门步骤,方便自己记忆理解咯。(至于,如果还不知gulp是什么的话,可以看看上文 ​​ 我的Gulp入门合集​​ )

       这里的步骤不会特别的详细。这里只记录一下使用Gulp工具前的一些入门步骤或准备工作。

1)首先当然需要我们安装一下 nodejs ,百度搜索一下 nodejs 进入官网下载即可;

2)安装完成后,可以在命令行中输入:npm -v 查看npm的版本号(判断nodejs是否正确安装);

3)安装cnpm,在命令行中执行 ($ 在Linux中另有含义,windows和Linux中均不需要我们输入 $)


$ npm install -g cnpm --registry=https://registry.npm.taobao.org

可以使用 cnpm -v 查看其版本号,判断是否正确安装。后面的操作我们将使用cnpm代替npm 命令。(至于这个步骤的意义在上文中已经说明);

4)全局安装 gulp,在命令行中执行


$ cnpm install gulp -g

全局安装gulp,会将内容安装到 C:\Users\DreamBoy\AppData\Roaming\npm 中(以windows系统 DreamBoy用户为例)。全局安装gulp的目的是为了执行gulp命令;

5)现在需要我们创建一个工程或者项目,如:GulpTest。

在命令行中进入该项目的目录,然后执行如下命令:


$ cnpm init

用该命令自动创建package.json配置文件(这是一个基本nodejs项目必不可少的配置文件),将存放在项目的根目录中。执行命令后会提示我们输入,如下必要的参数:name(项目名称)、version(项目版本)、description(项目描述);

6)我们需要本地安装 gulp 插件,在当前项目目录下使用如下命令:


$ cnpm install --save-dev gulp


用该命令本地安装gulp插件,安装成功后package.json配置文件将会更新保存对该插件的依赖说明到文件中。(如果删除项目中依赖的插件 node_modules 目录,可以在该项目目录下使用命令 cnpm install ,它会根据package.json配置文件中的依赖说明,重新下载插件到 node_modules目录中去。不信你试试)

PS:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

7)为了使用gulp插件,还需要我们在项目中创建gulpfile.js文件,可以在项目的根目录中,这是gulp项目的配置文件。基本格式如:

var gulp = require('gulp');

gulp.task('default', function() {
// 将你的默认的任务代码放在这
});

// 在命令行中运行 gulp
/*
默认的名为default的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),请输入gulp <task> <othertask>。
*/


8)可以在当前项目目录下执行命令 gulp 。将执行 gulpfile.js 文件中定义的任务。为了使我们在项目开发过程中更加的自动化,需要我们灵活地使用更过的 gulp 插件,在gulpfile.js 文件中定义管道中的任务。而安装 gulp 其他插件的过程,与本地安装 gulp 一致。针对不同的插件 将有不同的用法。


总结到这里为止。加油~