乐趣区

关于gulp:Gulp基本概念及应用

jiezi

gulp 简介, 根本应用

Gulp.js 是一个自动化构建工具, 开发者能够应用它在我的项目开发过程中主动执行常见工作。

yarn add gulp

装置 gulp 的时候会装置 gulp-cli。gulpfile.js 中导出一个函数, 最新的 gulp 中勾销了同步代码模式，每一个工作都是异步工作，最初须要调用回调函数或其余形式标记工作实现。如例子中如果没有 done，会报错. 如果工作名是default，运行时的命令和grunt 相似，间接运行 yarn gulp 即可。

 exports.foo = done => {console.log("foo task")
     done() // 标识工作实现}

gulp4.0中仍然保留了之前版本的工作导出形式, 然而这种形式曾经不举荐，举荐导出函数的形式应用 gulp

 const gulp = require('gulp')

 gulp.task('bar', done => {console.log("bar task")
     done()})

series,parallel 组合工作

gulp 能够通过 series,parallel 来组合工作，series 串行执行,parallel 并行执行，比方 js,css 在编译时就能够并行执行，比方部署工作时先要执行编译工作再进行其余工作，工作串行执行。根本应用形式如下

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

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);
}

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

串行

并行

异步工作

常见异步流程操作例子

// 回调形式
exports.callback = done => {console.log("callback task")
    done()}

exports.callback_error = done => {console.log("callback task")
    done(new Error("task failed"))
}

// promise 形式
exports.promise = done => {console.log("promise task")
    return Promise.resolve()}

exports.promise_error = () => {console.log("promise task")
    return Promise.reject(new Error('task failed'))
}

// async await 语法糖形式
// 包装一个 setTimeout 为 promise 形式
const timeout = time => {
    return new Promise(resolve => {setTimeout(resolve, time)
    })
}
exports.async = async () => {await timeout(1000)
    console.log("async task")
}

const fs = require("fs")
exports.stream = () => {const readStream = fs.createReadStream("package.json") // 读文件流
    const writeStream = fs.createWriteStream("tmp.txt") // 写入文件流
    //   pipe 形式导入到写入流，相似一个池子往另外一个池子倒水
    readStream.pipe(writeStream)
    // 完结机会就是 readStream end 的时候,stream 都有一个 end 事件
    return readStream
}

exports.stream = done => {const readStream = fs.createReadStream("package.json") // 读文件流
    const writeStream = fs.createWriteStream("tmp.txt") // 写入文件流

    readStream.pipe(writeStream)
    // 这种形式也能失常完结，意味着 gulp 中只是注册了这个事件监听工作完结
    readStream.on('end', () => {done()
    })
}

外围工作原理

gulp 的官网定义是 The streaming build system，实现一个构建管道的形式。
一个利用底层 node 文件流 api 模仿工作流: 输出 (读取流)-> 加工（转换流）-> 输入(写入流）
例子实现 css 压缩

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

// 模仿 css 文件压缩
exports.default = () => {
    // 文件读取流
    const read = fs.createReadStream('normalize.css')
    // 文件写入流
    const write = fs.createWriteStream('normalize.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
}

文件操作

gulp 的文件流操作 API 比 node 的更弱小，更容易应用，文件加工的转换流应用独立插件。gulp 创立构建工作的流程，先通过 src 形式创立读取流，借助插件的转换流实现文件加工, 最初通过 gulp 提供的 dest 办法来创立一个写入流, 写入到指标文件.
下面压缩 css 文件的例子，用 gulp 的 api 实现例子如下
须要引入两个插件

yarn add gulp-clean-css
yarn add gulp-rename

代码更为简洁，清晰

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

exports.default = () => {// return src('src/normalize.css').pipe(dest('dist'))
    // gulp 的 api 更为弱小，能够应用通配符
    return src('src/*.css')
        .pipe(cleanCss()) // 压缩
        .pipe(rename({extname: '.min.css'})) // 重名令
        .pipe(dest('dist')) // pipe 到 dist 目录
}
退出移动版