Gulp自动化构建工具

它很好的解决了Grunt构建速度慢的问题,因为它是基于内存去实现的,对文件的处理是在内存中完成的,同时还默认同时执行多个任务效率大大提高,而且使用方式相对于Grunt更加直观易懂,目前生态插件也完善

一：Gulp的基本使用

yarn init初始化一个package.json文件
yarn add gulp --dev 作为开发依赖安装
在根目录当中创建gulpfile.js文件
运行:yarn gulp 任务
因为gulp现在是异步任务了,所以每次任务完成都需要标记任务完成,否则会报错

exports.foo = done => { 
    console.log('hello gulp');
    // 这里调用回调函数的原因是gulp是异步任务的,所以每次任务完成需要调用回调告诉任务结束
    done()
}

//默认任务
exports.default = done => {
    console.log('default gulp');
    // 这里调用回调函数的原因是gulp是异步任务的,所以每次任务完成需要调用回调告诉任务结束
    done()
}

//gulp4.0之前注册gulp任务时需要使用gulp模块里的方法去实现的(目前不被推荐,推荐使用上面导出成员的方式)
//导入模块
const gulp = require('gulp')
//注册任务
gulp.task('bar', done => { 
    console.log('bar');
    done()
})

二：Gulp的组合任务

将任务操作组合成更大的操作,依次执行---series()
将任务组合成同时同时执行的较大操作----parallel()

const task1 = done => {
    setTimeout(() => {
        console.log('task1 working');
        done()
    }, 1000);
}
const task2 = done => {
    setTimeout(() => {
        console.log('task2 working');
        done()
    }, 1000);
}

const task3 = done => {
    setTimeout(() => {
        console.log('task3 working');
        done()
    }, 1000);
}

//series()
//parallel()
//将任务操作组合成更大的操作,依次执行---series()
//将任务组合成同时同时执行的较大操作----parallel()

//载入API
const { series, parallel } = require('gulp')

exports.foo = series(task1, task2, task3) //结果依次执行

exports.bar = parallel(task1, task2, task3) //结果同步执行

三：Gulp的异步任务

第一种：回调
第二种：promise
第三种：async await
第四中：返回stream----这是最常用到的

//第一种：回调
exports.callback = done => {
    console.log('callback');
    done()
}

//爆出错误
exports.callback_error = done => {
    console.log('callback_error');
    done(new Error('callback_error'))
}

//第二种：promise
exports.promise = () => {
    console.log('promise');
    return Promise.resolve()
}

//爆出错误
exports.promise_error = () => {
    console.log('promise_error');
    return Promise.reject(new Error('promise_error'))
}

//第三种async await
const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve,time)
    })
}

exports.async = async () => {
    await timeout(1000)
    console.log('async await');
}

//第四种返回 stream
//导入fs模块
const fs = require('fs')
exports.stream = () => {
    //读取文件
    const readStream = fs.createReadStream('package,json')
    //写入文件的文件流
    const writeStrram = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStrram)
    return readStream
}

//这是合上面方法一样的---模拟gulp
exports.stream1 = done => {
    //读取文件
    const readStream = fs.createReadStream('package,json')
    //写入文件的文件流
    const writeStrram = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStrram)
    readStream.on('end', () => {
        done()
    })
}

四：Gulp构建过程核心工作原理

读取流 --> 转换流 --> 写入流

const fs = require('fs')
//node中stream中的转换流
const { Transform } = require('stream')

exports.default = () => {
    //文件读取流
    const read = fs.createReadStream('normalize.css')
    //文件写入流
    const write = fs.createWriteStream('normalize.min.css')

    const transfrom = new Transform({
        transform: (chunk, encoding, callback) => {
            const input = chunk.toString()
            const output = input.replace(/\s+/g, '').replace(/\*.+?\*\//g, '')
            //第一个参数为错误对象,没有就传null
            callback(null,output)
        }
    })

    //把读取出来的文件流导入写入文件流
    read.pipe(transfrom)//转换
        .pipe(write)//写入

    return read
}

五：Gulp文件操作API+插件的使用

Gulp提供了读取流和写入流,相对于node底层的读取流和写入流更强大,更容易使用,转换流基本使用独立的插件使用
读取流：scr()
转换流：插件：gulp-clean-css
写入流：dest()

// Gulp文件操作API和插件
//scr()  ----读取流
//dest() ----写入流
//gulp-clean-css ----插件

const { dest, src } = require('gulp')
const cleanCss = require('gulp-clean-css')

exports.default = () => {
	//dest传入文件目录即可
	//scr匹配单个文件也可以使用通配符匹配批量文件
	return src('*.css').pipe(cleanCss()).pipe(dest('dist'))
}