gulp简单使用

Gulp使用教程

一、简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；
她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，
她能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成。

并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作

二、安装nodejs

2.1、说明：gulp是基于nodejs，理所当然需要安装nodejs；
2.2、安装：打开nodejs官网（https://nodejs.org/en/），点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。
注：安装完成之后注意将其配置到环境变量（系统变量path中），这样你就可以在全局范围内去使用它了
我的路径是在D:\Program Files\nodejs\node_modules\npm\bin，记得把它也配置进去
2.3测试：按window + r 输入cmd回车，然后输入node -v
         然后输入npm -v  
             如果都能打印出相应版本信息，那么说明你配置成功了

三、选装cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
网址：http://npm.taobao.org  
安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org；  

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
将路径C:\Users\asus\AppData\Roaming\npm\node_modules\cnpm配置到环境变量中，这样就可以在全局范围内使用cnpm命令了

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

四、全局安装gulp

在cmd中执行 cnpm install gulp -g

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

注意配置环境变量（C:\Users\asus\AppData\Roaming\npm\gulp）

五、新建package.json文件

进入自己需要的一个文件夹中
cd F:\workspace\gulp

创建package.json文件
    cnpm init 

在路径  下会形成这样的一个.json文件（部分内容为后添加的）
{
  "name": "gulptest",//项目名称（必须）
  "version": "0.0.1",//项目版本（必须）
  "description": "这是一个gulp的测试程序",//项目描述（必须）
"homepage": "",   //项目主页
  "main": "index.js",//入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [//关键词
    "gulp"
  ],
  "author": "wuxunxun007",//作者
  "license": "ISC"//项目许可协议
"devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }

}

查看package.json帮助文档，命令提示符执行cnpm help package.json

六、本地安装gulp插件

安装：定位目录命令后提示符执行cnpm install gulp --save-dev；
本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev；

将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md；

七、创建文件

在目录中创建src文件夹，在该文件夹中创建less文件夹和css文件夹  
在less文件中创建一个index.less文件，写一些代码  
然后在你的项目的根目录下创建一个gulpfile.js文件
在该文件中写入

然后打开cmd窗口，或者你安装了git环境的话，直接在该文件夹下右键点解Git Base Here，然后输入gulp命令，那么你就在你的src/css文件夹下就可以看到一个index.css文件，这个文件就是我们编译less文件之后生成的一个css文件

八、复制文件

8.1复制页面

在根目录下创建一个index.html写一点内容，
然后将gulpfile.js修改为
然后在命令行没执行gulp copy-index  那么我们就会在根目录下发现一个index.html文件




8.2 拷贝图片文件images

修改gulpfile.js
复制iamges文件加下的所有jpg文件
执行命令 gulp images
在dist/images下有这样三个文件
复制iamges文件加下的所有jpg和png文件
执行命令
复制iamges文件加下的所有文件
执行命令




8.3 同时拷贝两个文件夹,拷贝到dist文件夹下的data中

修改gulpfile.js
执行命令gulp data





8.4 拷贝文件是过滤文件,在json文件中新建一个json为test.json， 
然后修改gulpfile.js
删除dist/data文件下的文件
执行命令
我们发现，并没有把test.json拷贝进来






8.5如何将以上命令一次性执行，采用bulid命令

执行命令