gulp
gulp.js是一个前端构建工具。
安装
- npm
- 安装全局gulp，
npm install -g gulp。（如果没有梯子，最好安装下cnpm） cnpm 安装npm install -g cnpm --registry=https://registry.npm.taobao.org安装完cnpm，下面所有npm操作替换cnpm 执行即可。 - 进入项目，初始化（npm init）
- 项目安装gulp，项目文件夹下，
npm install --save-dev gulp。 (–save-dev 加入此项目依赖中，不需要可取消这个参数) - 项目根创建gulpfile.js文件，文件内创建任务测试。
var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello world!');
});
- 运行
gulp，可以看到默认执行，输出 hello world! 。测试成功。
gulp API
上面运行 gulp 执行default ，这个是gulp API。 [文档](https://www.gulpjs.com.cn/docs/api/)
gulp工作方式
gulp.src 获取文件流,通过pipe方法导入到插件，插件处理的流通过pipe方法导入 gulp.dest中, gulp.dest 输出目标文件。
gulp src
gulp.src(globs[, options])输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
文档这意思看着有点费劲，理解为获取文件路径。gulp通过这个方法获取到处理的文件流。
参数：
globs 文件匹配模式，匹配文件路径，文件名。
类型： string array
options 额外可选参数
类型： object
额外参数需要看手册
gulp.dest
gulp.dest(path[, options])能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。
理解为写文件，写入path路径文件。
参数：
path 文件写入路径
类型：string function
options 额外可选参数
类型：object
gulp.task
gulp.task(name[, deps], fn)定义一个使用 Orchestrator 实现的任务（task）。
用来定义任务，内部使用的是Orchestrator。
参数：
name 任务名字
deps 是当前任务需要的其他任务，一个数组。依赖任务，先于此任务执行。
类型：array
fn 该函数定义任务所要执行的一些操作，把任务要执行的代码写在里面。
- gulp.watch
gulp.watch(glob[, opts], tasks)gulp.watch(glob[, opts, cb])
监视文件，并且可以在文件发生改动时候做一些事情。
参数：
glob 文件匹配模式
类型 string array
opts 可选配置
类型 object
tasks 文件变动后执行的任务
类型 array
cb 一个函数，文件发生变化时调用的函数。
类型 function
Glob 匹配模式 (node-glob）参考语法
匹配符 说明
* 匹配文件路径中的0个或多个字符，但不会匹配路径分割符，
除非分隔符出现在末尾
** 匹配路径的0个会多个目录 及子目录 需要单独出现，
即他左右不能有其他的东西了如果出现在末尾，也能匹配文件
？ 匹配文件路径中的一个字符（不能匹配路径分割符/）
[...] 匹配方括号中 出现字符的任意一个，当方括号中第一个字符为^或!时，
则表示不匹配方括号中出现字符中的任意一个，
类似于js中正则表达式中的用法
!(pattern|pattern|pattern) 匹配任何与括号中给定的任意模式都不匹配
？(pattern|pattern|pattern) 匹配括号中给定的任意模式0次或1次
+(pattern|pattern|pattern) 匹配括号中的至少一次
*(pattern|pattern|pattern) 匹配括号中给定的任意模式0次或多次
@(pattern|pattern|pattern) 匹配括号中 给定的任意模式一次
eg：glob 匹配
|能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js|
|.* a.js,style.css,a.b,x.y
//*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js 能匹配 a.js,b.js,c.js
a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js
多种匹配模式时，使用数组
gulp.src(['js/*.js','css/*.css','*.html'])
数组中可以用 ！ 排除*(放在数组第一个无效)*
gulp.src([*.js,'!b*.js'])
编写一个任务
常用到压缩，写个压缩demo。 目录，根目录下有两个文件夹，dist空文件，src目录,src/js文件夹2个文件，common.js,demo.js。 任务目标，将js目录下的.js文件，压缩合并为new.min.js。之后将合并压缩的文件保存到dist/js/。
- 我们在初始化后的项目中，先安装所需插件，gulp-rename（重命名插件）,gulp-uglify（压缩js插件），gulp-concat（合并文件插件）。 npm install gulp-rename gulp-uglify gulp-concat –save-dev
- 编辑gulpfile.js
var gulp=require('gulp');
var rename= require('gulp-rename'); //引入插件
var uglify= require('gulp-uglify');
var concat= require('gulp-concat');
gulp.task('js', function(){ //创建名为 js的任务
return gulp.src('src/js/*.js') //读取文件流
.pipe(concat()) //合并
.pipe(uglify()) //压缩
.pipe(rename({suffix: '.min'})) //重命名
.pipe(gulp.dest('dist/js/')) //输出到指定路径
});
文件保存后，命令行执行任务： gulp js 。
可以看到Finshed时间，去dist目录可以看到合并压缩的文件已在里面。
gulp插件
- CSS压缩 gulp-minify-css
- Js压缩 gulp-uglify
- 重命名 gulp-rename
- 文件合并 gulp-concat
- 自动加载 gulp-load-plugins
- less编译 gulp-less
- sass编译 gulp-sass