Gulp打包

Gulp

基于流的自动化打包工具(对项目进行打包----项目工程化)，除了可以管理和执行任务，还可以监听文件，读写文件。优点：既可以单独完成构建也可以和其他工具搭配使用；缺点和Grunt类似，集成度不高，要写很多配置后才可以使用，无法做到开箱即用。

安装配置

1. 安装
   全局安装：npm i -g gulp
   全局gulp命令行工具： gulp-cli : npm i -g gulp-cli

2. 在项目中使用：
   1.安装项目依赖： npm install --save-dev gulp == npm i -D gulp
   2.在根目录创建一个 gulpfile.js 文件(作用：gulp进行打包时的配置文件)
   测试：function defaultTask(cb){
   cb();
   }
   exports.default = defaultTask
   3.执行 gulp default(如果是default可以省略，其他名字不能省略)

语法

3. 创建任务：就是一个函数

4. 导出任务：
   1.一次导出一个任务： exports.xx = xx;
   2.导出组合任务(导出多个)
   需要提前引入series() 和 paralllel(),是gulp的内置函数---->const { series,parallel } = require(‘gulp’)
   exports.xx = series(task1,task2)顺序执行,只有task1执行完毕后才能执行task2
   exports.xx = parallel(task1,task2)并发执行，task1,task2同时执行
   3.公有任务，私有任务
   创建的任务有没有被直接导出？直接导出的就是公有任务，不是直接导出的就是私有任务

5. 返回值：
   stream流，callback.需要了解Node.js中的 EventEmmitter on() emit() child_process(子进程)

6. api :
   1. src(‘文件路径’) 从文件系统中读取文件然后生成一个 Node可读流(stream)
   2. .pipe() 对流进行链式地管道操作
   3. dest() 接受一个输出目录作为参数，并且它还会产生一个Node可写流，通常作为终止流。当它接收到通过管道传输的文件时，它会将文件内容及文件属性写入到指定的目录中

7. 向流(stream)中添加文件
   可以在pipe方法中再次调用src方法，添加新的文件进来

8. 分阶段输出
   在pipe方法中可以多次使用dest方法分阶段的进行输出

9. glob
   src (glob)
   glob是由普通字符和 / 或*（通配符）组成的字符串，用于匹配文件路径
   1.普通字符串
   src(’./index.js’)
   2. * (通配符)
   src(’./.js’) —> 匹配任意多的文件
   3. ** 穿透功能
   src(’./dist/**/.js’) —> 匹配所有dist文件下的所有的以 .js 文件为结尾的文件
   4. ！ (取反,排除功能)
   src([’.//*.js’,’!./node_modules//.js’]) --> 匹配根目录下所有的.js文件，排除node_modules下所有的.js文件
   5.数组形式，一次匹配多个
   src([’./index.js’,’./dist/.js’])

10. watch(参1：检测的文件，参2：{ ignoreInitial : false或delay : 500或events:‘情景’}参 3：检测的任务) : 文件监听
    api中的watch()方法利用文件系统的监控程序将globs与任务进行关联。他对匹配glob的文件进行监控，如果有文件被修改了就执行关联的任务
    1.初次执行： { ignoreInitial : false }
    2.延迟： { delay : 500 }

11. 插件
    用法 ： 1.安装 2.引入 3.调用
    1.压缩js的插件：gulp-uglify-es
    2.es6转es5插件：
    babel插件 安装：npm install --save-dev gulp-babel @babel/core @babel/preset-env
    安装插件：npm i -D @babel/plugin-proposal-decorators
    执行 npx babel 文件名 ----》会告诉我们少了什么插件
    3.react
    安装： npm i react
    解析 react 的 babel 规则集 npm i @babel/preset-react ,把规则集配置到babel中
    4.压缩css—》文档中有详细命令
    5.压缩html
    6.less 转 css
    7.压缩图片
    8.合并
    9.重命名

12. 扩展知识：Node.js原生模块
    -EventEmmitter on() emit()
    -等待 process.nextTick()上触发的多个事件
    -child_process(子进程)
    -stream流
    -ReadableStream
    -WriteableStream
    -fs 原生模块
    -Stream 原生模块
    -Events 原生模块

例如（gulpfile.js文件）：
const {series,parallel,src,dest,task,watch} = require(‘gulp’)
const uglify = require(‘gulp-uglify-es’).default //可以转es
const fs = require(‘fs’);// src和.pipe原理 首先引入 fs 模块
const path = require(‘path’);
const babel = require(‘gulp-babel’);//引入babel，用于将es6转es5
const yajs = require(‘gulp-uglify’);
const mincss = require(‘gulp-minify-css’);
const minhtml = require(‘gulp-minify-html’);
const minImage = require(‘gulp-imagemin’);
const lessTocss = require(‘gulp-less’);
const gconcat = require(‘gulp-concat’);
const rename = require(‘gulp-rename’);
// 测试：
function defaultTask(cb){
cb();
}
exports.default = defaultTask
// 导出多个任务
function aa(cb){
cb()
}
function bb(cb){
cb()
}
exports.zuhe = series(aa,bb);//先执行完1，在执行2
exports.zhuhe = parallel(bb,aa);//同时执行
// 压缩指定文件
function yasuo(){
// src 和 .pipe 原理：
// 创建可读流 参数一 ：读取的文件 参数二 ：每次读取16位
// let Rstream = fs.createReadStream(’./index.js’,{highWaterMark:16});
// let Wstream = fs.createWriteStream(’./dist/hello.js’);
// console.log(Rstream);
// // on()方法：可以监听读取的数据
// Rstream.on(‘data’,(chunk)=>{
// // console.log(chunk);//二进制
// console.log(chunk.toString());
// Rstream.pause();//读完一行，暂停读取
// Wstream.write(chunk);// 把读取到的数据写入到指定位置
// Rstream.resume();//再次开始读取
// })
// 读取文件内容，然后转成可读流
let fail = src(’./index.js’)
return fail.pipe(uglify())
.pipe(dest(’./dist’))
}
exports.uglify = yasuo; //导出任务
// 压缩俩个文件，一个es5，另一个es6(需要经过babel编译转成es5)
function yasuo2(){
return src(‘index.js’)
//再次调用src
.pipe(uglify())
.pipe(src(‘es6.js’))
.pipe(babel())
.pipe(uglify())
.pipe(dest(‘dist/js’))
}
exports.yasuo2 = yasuo2;
function yasuo3(){
return src(‘es6.js’)
.pipe(babel())
.pipe(uglify())
.pipe(dest(‘dist/dev’))
.pipe(src(‘index.js’))
.pipe(uglify())
.pipe(dest(‘dist/build’))
}
exports.yasuo3 = yasuo3;
function yasuoAll(){
return src([‘dist//.js’,’!dist/build/.js’,’!dist/data/.js’,’!dist/dev/.js’,’!dist/js/*.js’])
.pipe(babel())
.pipe(uglify())
.pipe(dest(‘dist/newdist’))
}
exports.yasuoAll = yasuoAll
// function dabao(){
// return src(['dist//.js’,’!dist/build/.js’,’!./node_modules//.js’,’!dist/data/.js’,’!dist/dev/.js’,’!dist/js/.js’,’!dist/newdist/*.js’,’!./myproject//.js’])
// .pipe(babel())
// .pipe(uglify())
// .pipe(gconcat(‘zuhefile.js’))
// .pipe(rename({
// suffix:’.min’
// }))
// .pipe(src(’**/.html’))
// .pipe(minhtml())
// .pipe(src(’/*.css’))
// .pipe(mincss())
// .pipe(src(’/.(jpg|png|gif|svg)’))
// .pipe(minImage())
// .pipe(dest(‘dist’))
// }
// exports.dabao = dabao;
// 引入gulp
const gulp = require(‘gulp’);
// 编写一个任务
// task(第一个参数 ：任务的名字 自定义
// 第二个参数 ： 回调函数，任务执行的功能
// )
gulp.task(‘hello’,function(){
console.log(‘hello world’);
})
// gulp.src()找到源文件路径
// gulp.dest()找到目的文件路径 [注] 如果设置的这个目的文件路径不存在，会自动创建
// pipe() 理解程序运行管道
// 案例：整理.HTML文件
gulp.task(‘copyHtml’,function(){
return gulp.src(‘index.html’)
.pipe(gulp.dest(‘dist/’))
})
// 静态文件 拷贝图片
gulp.task(‘images’,function(){
return gulp.src('image/.jpg’)
.pipe(gulp.dest(‘dist/images’))
})
// 拷贝多个文件到一个目录中
gulp.task(‘data’,function(){
return gulp.src([’.css’,’.json’])
.pipe(gulp.dest(‘dist/data’))
})
// watch([’/*.js’,’!node_modules//.js’,’!gulpfile.js’,’!dist/**/.js’],yasuo2)