gulp入门实例{css文件，img文件的压缩}

1:   安装node.js

 （说明：gulp是基于node.js环境下执行，所以要先安装node.js)

  打开node.js的官网，选择所需的版本点击下载即可；

2:   gulp 的简单操作命令：

首先打开命令窗口

(window + r 输入cmd回车   or    在你需要执行的文件夹下按住shift键的同时，单击鼠标右键—>点击：在此处打开命令窗口（W）)

 2.1：node -v       --->   查看安装的nodejs版本

2.2：npm -v    --->  查看npm的版本号

2.3:   cd +文件路径    --->定位到文件目录下

2.4：dir   --->列出文件列表

2.5：cls   --->清空命令窗口内容

3：  npm介绍

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

3.2、使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]；

3.2.1、<name>：node插件名称。例：npm install gulp-less --save-dev

3.2.2、-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

3.2.3、--save：将保存配置信息至package.json（package.json是node.js的项目配置文件）；

3.2.4、-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

3.2.5、为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。

3.3、使用npm卸载插件：npm uninstall <name> [-g] [--save-dev]  PS：不要直接删除本地插件包

3.3.1、删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

3.3.2、借助rimraf：npm install rimraf -g 用法：rimraf node_modules

3.4、使用npm更新插件：npm update <name> [-g] [--save-dev]

3.4.1、更新全部插件：npm update [--save-dev]

3.5、查看npm帮助：npm help

3.6、当前目录已安装插件：npm list

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

4：选装cnpm

4.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”；

4.2、官方网址：http://npm.taobao.org；

4.3、安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

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

5：全局安装gulp

安装命令：cnpm install gulp -g  

6：新鲜package.json文件

6.1   说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；

6.2   命令提示符执行cnpm init   （初始化，执行完命令直接回车即可，依次应输入：项目名称，项目版本，项目描述，项目仓库，关键字，             作者，许可证信息    注释：这里输入的内容可以为空，直接回车跳过即可）

6.3执行文件夹下就会生成一个package.json文件

要注意的是：package.json是一个普通json文件，不能添加任何注释。 

7：本地安装gulp插件

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

8：新建gulpfile.js 文件（必须）

8.1   gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）

8.2  配置文件

PS ： 此处引入两个模块    一个为css 文件压缩模块，另一个为img图片压缩模块

9：导入模块

10：执行模块定义的任务

命令提示符：gulp  （+  任务名称）  

最后总结一下：

1：首先打开命令窗口，cd到执行文件夹下面

2：安装  npmjs.org  镜像

3：全局安装gulp

4：初始化    cnpm init，新建package.json文件

5：本地安装gulp插件 

6：新建gulpfiel.js文件      配置文件（导入模块）

7：执行任务

最后如有错误，欢迎指正，谢谢！