gulp笔记

gulp

gulp.js是一个前端构建工具。

安装

1. npm
2. 安装全局gulp，npm install -g gulp。（如果没有梯子，最好安装下cnpm）
   cnpm 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org
   安装完cnpm，下面所有npm操作替换cnpm 执行即可。
3. 进入项目，初始化（npm init）
4. 项目安装gulp，项目文件夹下，npm install --save-dev gulp。 (–save-dev 加入此项目依赖中，不需要可取消这个参数)
5. 项目根创建gulpfile.js文件，文件内创建任务测试。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world!');
});

6. 运行 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/。

1. 我们在初始化后的项目中，先安装所需插件，gulp-rename（重命名插件）,gulp-uglify（压缩js插件），gulp-concat（合并文件插件）。
   npm install gulp-rename gulp-uglify gulp-concat –save-dev
2. 编辑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