学习gulp，看这篇就够了

gulp

作用

• 用来处理程序中的静态资源的，也就是对项目中的静态资源进行打包处理

原理

• 基于任务的工具，gulp的操作都要进行任务注册，然后基于这个任务对操作进行处理，这就是gulp的任务化特点
• gulp中的任务都必须写gulpfile.js文件中
• gulp的每一个任务都是一个异步的js函数，在函数中可以有一个回调函数callback或者返回promise,stream,event emitter
• 工作流程：src()读取文件创建文件输出流->pipe传送给插件进行处理->...->pipe传送给dest()进行文件输出

创建gulp任务

任务种类

• 公开任务：通过exports向暴露的任务，就是公开任务,这个任务能够被gulp命令直接调用
• 私有任务：没有向外暴露的任务，通常作为 series() 或 parallel() 组合的组成部分，私有任务不能够被用户直接调用

创建任务

/**
 * 1.一切皆任务，任何的任务都要在gulpfile.js文件中注册
 */
function print(){
    console.log("gulp的任务都是js函数")
    return new Promise((resolve,reject)=>{
        resolve("1")
    })
}

function show(callback){
    callback()
}
exports.print=print

gulp常使用的api

gulp.src(globs[,options])

• 作用：读取文件，并且以流的方式返回
• 参数1：路径匹配参数，参数2：配置参数
• 文档

gulp.dest(globs[,options])

• 作用：创建一个文件写入流，当文件不存在时，自动创建
• 参数1：写入文件的路径，参数2：配置参数
  • 路径：只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名
• 文档

gulp.watch(globs, [options], [task])

• 作用：监听globs指定的文件的变化，当文件发生变化，触发任务task
• 参数1：监听的文件路径，参数2:配置参数，参数3：任务
• 文档

const {watch}=require("gulp")

function print(){
    console.log("文件发送了变化")
    return Promise.resolve("文件发送了变化")
}

function wa(){
    watch("src/index.js",print)
}

module.exports={
    print,wa
}

gulp.series(...task)

• 作用：将多个任务操作组合成一个大的操作，这些操作将按序执行，当一个操作出现错误，其他的操作也会停止执行

gulp.parallel(...task)

• 作用：将多个任务操作组合成一个同时执行的较大操作，

常使用的插件

中gulp-load-plugins:自动加载插件

• 安装：npm i gulp-load-plugins -D
• 使用：let plugins=require("gulp-load-plugins")()
• 加载其他插件：plugins.rename()

gulp-rename:对文件流中的文件进行重命名

• 安装：npm i gulp-rename -D
• 使用：let guleRename=require('gulp-rename')

let {rename} = require('gulp-load-plugins')();
let {src,dest}=require("gulp")
function chuli(){
    src("src/*.js").pipe(rename((path)=>{
        path.basename+="-gg"
    })).pipe(dest("src/output"))
}
exports.chuli=chuli

gulp-uglify:对js文件进行压缩处理

• 安装：npm i gulp-uglify -D
• 默认无法压缩es6代码
• 使用

let {uglify} = require('gulp-load-plugins')();
let {src,dest}=require("gulp")
function compressJS(){
    return src("src/index.js").pipe(uglify()).pipe(dest("dist"))
}
exports.compressJS=compressJS

gulp-minify-css:对css文件进行压缩

• 安装：npm i gulp-minify-css -D
• 使用

let {minifyCss} = require('gulp-load-plugins')();
let {src,dest}=require("gulp")
function compressCss(){
    return src("src/index.css").pipe(minifyCss()).pipe(dest("dist"))
}
exports.compressCss=compressCss

gulp-minify-html:对html文件进行压缩

• 安装：npm i gulp-minify-html -D
• 使用

let {minifyHtml} = require('gulp-load-plugins')();
let {src,dest}=require("gulp")
function compressHtml(){
    return src("src/index.html").pipe(minifyHtml()).pipe(dest("dist"))
}
exports.compressHtml=compressHtml

gulp-jshint:对js文件进行检查

• 安装：npm i gulp-jshint -D
• 使用

let {jshint} = require('gulp-load-plugins')();
let {src}=require("gulp")
function inspect(){
    //reporter:输出检查结果
    return src("src/index.js").pipe(jshint()).pipe(jshint.reporter())
}
exports.inspect=inspect

gulp-concat:合并文件

• 安装：npm i gulp-concat -D
• 使用

let {concat} = require('gulp-load-plugins')();
let {src,dest}=require("gulp")
function concatFile(){
    //all.js:合并后生成的文件
    return src("src/index.*").pipe(concat('all.js')).pipe(dest("dist"))
}
exports.concatFile=concatFile

gulp-less:对less文件进行编译

• 安装：npm i gulp-less -D
• 使用

let {less,minifyCss,concat} = require('gulp-load-plugins')();

let {src,dest}=require("gulp");
/**
 * 1.编译less文件，2,合并index.css和index.less
 */
function compile(){
    let le1= src("src/index.less").pipe(less())
    let le2=src("src/index.css")
    return le1.pipe(le2).pipe(concat("index.css")).pipe(minifyCss()).pipe(dest("dist"))
}
exports.compile=compile

gulp-scss:对scss文件进行编译

• 安装：npm i gulp-scss -D

gulp-imagemin:压缩图片

• 安装：npm i gulp-imagemin -D,npm i imagemin-pngquant -D
• 安装错误,使用错误
• 使用

let {imagemin} = require('gulp-load-plugins')();
let pngquant=require("imagemin-pngquant")  //用于压缩png图片
let {src,dest}=require("gulp");

function compressImg(){
    return src("src/img/1.png").pipe(imagemin({progressive:true,use:[pngquant()]})).pipe(dest("dist/img"))
}
exports.compressImg=compressImg

博文