一、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() 监听方法