Gulp构建工具 gn构建工具

一、Gulp:

Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。 使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。(gulp是基于node.js开发的)

二、Gulp的安装：

1、先安装node.js;

2、全局安装gulp 打开cmd 命令行窗口安装：

命令： npm install -g gulp@3.9.1 gulp的全局安装

检查gulp是否安装成功： gulp -v

3、局部安装 在项目目录中安装gulp :

在该项目目录下进行局部安装gulp 命令是：

进入到项目目录下：

npm install --save-dev gulp@3.9.1 局部安装gulp的命令

安装成功后，通过 gulp-v 确定安装是否成功！

接下来的操作都在项目目录下完成：

4、配置package.json文件：

命令：

npm init -y/npm init

5、安装gulp 插件

命令：

npm install --save-dev 插件名称

例如：

npm install --save-dev gulp-cssmin

npm install --save-dev gulp-uglify

gulp-sass 将sass文件转成css文件（有可能安装不上---选择性安装）

gulp-cssmin 压缩css文件

gulp-uglify 压缩js文件

gulp-concat 合并文件

gulp-rename 重命名

使用npm命令移出所依赖的模块：npm utinstall package名称 -save

三、Gulp使用方法：

1、在项目下打开命令行

2、运行gulp命令，会有提示No gulpfile found

3、在项目根目录下创建一个文件 gulpfile.js

4、再次运行gulp 命令，会有提示：

Task'default'is not in your gulpfile

说明运行gulp命令时，会自动查找gulpfile中的 default 任务

5、布置任务 default任务

先引入 gulp 模块，使用require()方法引入，例如：var g =require("gulp")；

使用task()方法布置任务，有三个参数：

第一个参数： 任务名称

第二个参数：依赖的其他任务（可以省略） 是一个数组

第三个参数：回调函数

布置好default任务后，再次运行gulp命令，会自动输出default任务；

也可以布置自定义任务，比如布置一个say任务，可以使用gulp say 执行该任务;

如果一次执行多个任务，可以在task的第二个参数上，通过一个数组指定。

6、其他方法：

src()获取源文件路径；

参数：可以是一个字符串或者一个数组

dest()获取目标文件的路径

参数：是一个字符串，该方法可以自动生成目录

pipe() 管道方法 表示下一步

watch() 监听方法