前端现阶段主流自动化构建工具有:grunt,gulp,webpack等，他们能对网站资源进行优化，大大提高我们的工作效率；gulp是基于NodeJS的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。让我们一起来学习gulpj简单的吧吧！ ^_^

一，NodeJS的环境搭建：

说明：gulp是基于nodejs，理所当然需要安装nodejs；

安装：打开NodeJS官网 -> 点击Download按钮 ->根据自身电脑系统选择对应版本（.msi文件）->傻瓜试（next）就可以了（安装路径随意）。

二，命令行操作：

　　命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt，即开始 ->搜索cmd）；

　　本例操作是在windows系统下进行的，进入cmd(即：点击开始 ->搜索cmd回车）；

　　node -v查看安装的nodejs版本，出现版本号，说明已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；

　　npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器；

　　cd定位到你的项目下的目录，用法：cd + 项目路径 ；

　　dir列出文件列表；

　　cls清空命令提示符窗口内容。

三，npm的介绍（本文结合css框架sass，和webstrom开发工具）

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

　　npm使用前提：基于NodeJS环境和Git环境（本文不做详解）两者之上才可以使用。没有的话先安装；

　　以下操作在webstrom开发工具Terminal中进行(在cmd中操作相同)；

　　首先，进入项目路径下；

　　npm安装插件命令两种：

　　全局安装:  npm install <name> [-g];

　　局部安装: npm install <name> [--save-dev]；

　　<name>：要安装的node插件名称。例：npm install gulp -g (全局安装)

　　npm install gulp-g 全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 

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

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

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

　　为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可

　　npm init  一直回车，初始化产生node_modules文件，package.json

　　npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包。

　　　　package.json是一个普通json文件，所以不能添加任何注释，每安装一个插件文件中将多一个插件名及版本号。内容　　如下：

1 { 2 "name": "gulp-demo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "grunt-autoprefixer": "^3.0.4", 13 "gulp": "^3.9.1", 14 "gulp-autoprefixer": "^3.1.1", 15 "gulp-concat": "^2.6.0", 16 "gulp-connect": "^5.0.0", 17 "gulp-htmlmin": "^3.0.0", 18 "gulp-imagemin": "^3.0.3", 19 "gulp-minify-css": "^1.2.4", 20 "gulp-rename": "^1.2.2", 21 "gulp-rev": "^7.1.2", 22 "gulp-rev-collector": "^1.0.5", 23 "gulp-sass": "^2.3.2", 24 "gulp-uglify": "^2.0.0" 25 } 26 }

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

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

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

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

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

　　查看npm帮助：npm help

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

　　四，gulp安装

　　　　全局安装：npm install gulp -g

　　　　局部（本地）安装（当前项目路径下）：npm install gulp -save-dev

　　　　查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

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

　　五，新建gulpfile.js文件

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

　　六，实例展示（结合sass框架，webstorm开发工具）

　　　　gulpfile.js文件中的gulp常见命令