Gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器
它不仅能对网站资源进行优化，而且在开发过程中很多重复任务能够使用正确的
工具自动完成，使用它，不仅可以很愉快的编写代码，而且能大大提升开发效率
下载安装使用 gulp
首先安装 nodejs，通过 nodejs 的 npm 全局安装和项目安装 gulp 全局插件，
其次在项目里安装所需要的 gulp 插件，然后新建 gulp 的配 置文件
gulpfile.js 配置文件定制 gulp 任务，通过命令行运行 gulp 任务即可。
安装 nodeJS
全局安装 gulp
项目中安装 gulp 以及 gulp 插件
配置 gulpfile.js
运行任务
安装 nodeJS: https://nodejs.org/en/
下载安装包，安装。
命令行运行 node –v 测试安装
安装 gulp 插件
>> npm install gulp –g // 全局安装 gulp 插件
npm:node package manager,nodejs 包管理器，用于 node 插件管理（安装、卸载、管理依赖）npm 安装插件：npm install[-g] [--save-dev]：插件的名称 -g：全局安装，将会安装在 C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量。非全局安装，就会安装在当前目录下 node_module/下，通过 require 引入 --save：将配置信息保存到 package.json 文件中【package.json 是 Node 项目配置文件】 -dev：保存配置到 devDependencies 节点，不指定就会保存 dependencies 节点node 插件比较大，不方便加入版本管理中，于是将依赖插件的信息保存在 package.json 文件中，这个文件可以交给版本管理，其他人只需要获取 package.json,就可以在自己本地通过 npm install命令根据 package.json 中的依赖信息，自行下载引入插件。卸载插件：npm uninstall[-g] [--save-dev]删除全部插件：npm install rimraf –g | rimraf node_modules更新插件：npm update[--save-dev]
更新全部插件：npm update [--save-dev]
查看 npm 帮助：npm help
查看已安装列表：npm list
完成一个自动对项目 js 打包的任务配置，整合文件到一个文件中
css/:样式开发目录
js/:脚本开发目录
images/:开发中图片目录
disk/:编译后的文件存放目录，gulp 运行后的所有文件会存放在这里
第二步：进入项目文件夹，初始化项目，自动生成 package.json 文件
打开命令行窗口，进入目标文件夹，键入 npm init 初始化项目
name:(gulp_pro) 输入项目名称（不输入就使用当前目录名称）
version:(1.0.0)输入版本号，默认是括号中的版本号
description:项目描述信息
entry point:(index.js) 目标文件
test command:测试命令，可以直接回车表示忽略
git repository:git 仓库，可以忽略
keyword:关键词
author:作者
license:授权信息
第三步：安装 gulp 插件，安装文件合并 gulp-concat 插件
执行名命令：npm install gulp --save-dev
未完成后再 package.json 中，就会出现 devDenpendencies 配置项
执行命令：npm install gulp-concat --save-dev
gulp-concat 合并文件插件
.src():要打包的所有文件列表
.pipe():管道符，使用.pipe()前面的命令作为参数执行 pipe()后面指定的命令
.dest():打包提交的目标文件夹
赖插件来进行完成的。本节主要从两方面入手进行分析：
第一方面，了解 Gulp 的基本操作 API
第二方面，了解并掌握 gulp 的常见插件的操作
1) 常规 API
gulp.src(globs [,options])
描述：src 方法是指定需要处理的源文件的路径。
参数：
globs:需要处理的源文件的路径，必填
src/a.js：指定具体文件
src/*.js：匹配所有文件，这里匹配 src 下所有的 js 文件
src/**/：匹配 0 个或者多个子文件夹，这里匹配 src 下所有文件夹
src{a,b}.js：匹配多个属性，这里匹配 src 下 a.js 和 b.js
!src/a.js：排除文件，这里匹配结果中排除掉 a.js 文件
options:类型，可选，有 3 个属性：buffer、read、base
options.buffer:boolean 类型，默认 true
options.read:boolean 类型，默认 true
options.base:string 类型，设置输出路径以某个路径的某个组成部分为基础向后拼接
gulp.dest(path [,options])
描述：dest 方法指定处理完成后文件的输出路径
参数：
path:指定文件输出路径，或者定义函数返回输出路径
options:有两个属性 cwd、mode
options.cwd:string 类型，默认 process.cwd()前脚本的工作目录路径
options.mode:string 类型，默认 0777，指定被创建的文件夹的权限
gulp.task(name [,deps], fn)
描述：task 定义一个可执行的 gulp 任务
参数：
name:string 类型，任务名称（不能包含空格）
deps:该任务依赖的任务，是一个 string 类型的数组，执行完数组中任务之后才会执行当前任务
fn:任务调用执行完成后的回调函数
gulp.watch(glob [,opts], tasks)/watch(glob [,opts, cb])
描述：watch 方法用于监听文件变化，一旦变化就会执行指定任务
参数：
glob:需要处理的源文件匹配的路径，可以使一个字符串表示的路径也可以使数组【必填】
tasks:需要执行的任务的名称数组【必填】
cb:每个文件变化执行的回调函数【可选】
重命名插件——gulp-rename
1) 安装插件:npm install gulp-rename --save-dev
2) gulpfile.js 中配置任务
3) 执行任务
4) 结果查看
样式压缩插件——gulp-minify-css
1) 安装插件:npm install gulp-minify-css
2) 编辑 src/css/main.css
3) gulpfile.js 中配置任务
4) 执行任务：gulp minifycss
图片压缩插件——gulp-imagemin
1) 安装插件:npm install gulp-imagemin
2) 在 images/目录下存放图片
3) gulpfile.js 中配置任务
4) 执行任务：gulp imagemin
5) 结果查看
服务器插件——gulp-connect
1) 安装插件：npm install gulp-connect --save-dev
2) gulpfile.js 中配置任务
3) 执行任务：gulp server
4) 结果查看：打开浏览器，访问 http://localhost:8080
浏览器自动刷新——gulp-livereload
1) 安装插件：npm install gulp-livereload --save-dev
2) 安装插件：npm install gulp-watch --save-dev
3) gulpfile.js 中配置任务
gulp-watch:监听模块，根据监听的文件，执行指定的任务列表
gulp.task(“default”..:default 任务，gulp 中的默认任务
GULP 在 在 WEBSTORM 中的使用
1） 创建项目
2） 命令行添加 gulp 插件
3） 创建 package.json 文件【命令行创建】
编辑：牟文斌
官方网站：http://gulpjs.com 中文网站：http://www.gulpjs.com.cn
4） 添加插件——gulp,gulp-concat
5） 创建项目任务文件 gulpfile.js 并定义任务
6） 查看并执行 gulp 任务
a) 在 gulpfile.js 文件上右键点击
b) 弹出的菜单中选择 show gulp tasks
c) 项目文件中就会出来一个 gulp task 窗口，窗口中是 gulp 任务列表
d) 在任务列表上，右键点击，可以选择执行任务
网友评论