Gulp-入门教程 搭配环境

之前一直听朋友谈起gulp,但没有使用过，最近有机会接触到，现在给大家分享下，不对的地方还请指正。我一直以为互相分享是学习的一种好方式。下面进入正题：

首先来了解下gulp,最起码要知道：我们为什么要学它，它的优势。gulp是前端开发过程中对代码进行构建的工具，它不仅能对网站资源进行优化，在开发过程中很多重复的任务能使用正确的工具自动完成；gulp是基于Nodejs的自动任务运行器，借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp 的流操作，能更快地更便捷地完成构建工作。下面将学习如何使用gulp。

常用网址：

gulp官方网址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424

使用gulp大致步骤
先谈谈大致使用gulp的步骤。首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的
gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

gulp 基于node，在此省略node的安装，列举下常用的简单命令

node -v （查看nodejs版本，确认nodejs安装正确）
npm -v （查看npm版本，npm和nodejs一起被安装）
cd （定位到目录）
dir （列出当前目录的文件）
cls （清空窗口）

npm介绍

npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]例：npm install gulp-minify-css --save-dev

-g：全局安装   非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用。

--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）

-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点

1.安装cnpm

npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常）

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以npm的服务器在中国就好了。来自淘宝官网：这是一个完整 npmjs.org 镜像，但仅限于只读，官方网址：http://npm.taobao.org

安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）

2.安装gulp

全局安装gulp目的是为了通过它执行gulp任务。
安装：命令提示符执行cnpm install gulp -g
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装

3.新建package.json文件
说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件
它是类似这样一个json文件（注意：json文件内是不能写注释的）。

可以手动新建这个配置文件，也可以命令提示符执行cnpm init

 4.本地安装gulp插件

安装：定位目录命令后提示符执行cnpm install --save-dev

本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev

将会安装在node_modules的gulp-less目录下，为了能正常使用，我们还得本地安装gulp：cnpm install gulp --save-dev

5.新建gulpfile.js文件

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）它大概是这样一个js文件

6.运行gulp

说明：命令提示符执行gulp 任务名称
压缩css：命令提示符执行gulp cssmin

以上为gulp使用的大致步骤，以及所需安的环境，希望大家可以受益，有问题希望留言。