常用自动化构建工具总结

常见构建工具

• Grunt 基于磁盘读写，构建速度慢
• Gulp 基于内存实现，支持同时执行多个任务
• FLS 把典型需求集成起来，大而全，适合初学者

• webpack是模块打包工具

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

Gulp

1. 基本使用

• yarn init
• yarn add gulp --dev
• 创建gulpfile.js文件

// gulp入口文件
exports.foo = done => {
    console.log('foo');
    // gulp取消了同步模式，需要标识任务完成
    done()
};

// 默认任务
exports.default = done => {
    console.log('default');
    done();
}

• 执行：yarn gulp foo运行指定任务 或者 yarn gulp 运行默认任务

2. 创建组合任务

• series 会按照顺序依次执行任务，适合部署时执行
• parallel 并行执行任务，适合例如JS 和CSS同时执行

const { series, parallel } = require('gulp');

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

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

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

exports.foo = series(task1, task2, task3);
exports.bar = parallel(task1, task2, task3);

3. 异步任务的方式

• 错误优先回调函数

exports.callback = done => {
    done(new Error('failed'));
}

• promise

exports.callback = done => {
    // resolve中不要传入值，因为会被gulp忽略
    return Promise.resolve()
}

exports.callback = done => {
    return Promise.reject(new Error('reject'))
}

• async

// 版本只受限于node环境
exports.callback = async () => {
    await timeout(1000);
    console.log('async');
}

const timeout = time => {
    return new Promise(resolve =>{
        setTimeout(resolve, time)
    })
}

• stream

const fs = require('fs');
exports.stream = () => {
    const readStream = fs.createReadStream('package.json');
    const writeStream = fs.createWriteStream('temp.text');
    readStream.pipe(writeStream);
    return readStream;
}

// 模拟实现
exports.stream = done => {
    const readStream = fs.createReadStream('package.json');
    const writeStream = fs.createWriteStream('temp.text');
    readStream.pipe(writeStream);
    readStream.on('end', () => {
        done()
    })
}

4. 构建过程

• 输入（读取流） - 加工（转换流） - 输出（写入流）

const fs = require('fs');
const { Transform } = require('stream');

exports.default = () => {
    // 读取流
    const read = fs.createReadStream('index.css');
    // 写入流
    const write = fs.createWriteStream('index.min.css');
    // 转换流
    const transform = new Transform({
        transform: (chunk, encoding, callback) => {
            // chunk => 读取流中读取到的内容（Buffer）
            const input = chunk.toString();
            const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g,'')
            callback(null, output)
        }
    })
    // 把读取出来的文件流导入写入文件流 
    read
    .pipe(transform) // 转换
    .pipe(write) // 写入

    return read
}

5. API常规使用

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

exports.default = () => {
    return src('src/*.css')
        .pipe(cleanCss())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(dest('dist'))
}

6. 封装工作流

• Gulpfile + Gulp