gulp起步笔记

Gulp 前端打包工具的一点记录

特性: 任务化, 基于流,

使用

安装gulp脚手架

npm install --global gulp-cli

创建项目

npx mkdir project-name

初始化,创建package.json文件

npm init

安装gulp

npm install --save-dev gulp

创建 gulpfile 文件

// 在项目文件根目录下创建一个 gulpfile.js 的文件
function defaultTask(cb){
    cb()
}
exports.default = defaultTask

执行测试

// 通常为默认 gulp
gulp

创建任务

在 gulp 中每个任务都是一个异步的 JS 函数, 函数可以接收一个 callback 作为参数的回调函数.

导出任务

任务的类型可以设置为 public(公开) 或 private(私有) 两种

public:

可以从 gulpfile 中被导出, 可以通过 gulp 命令直接调用

private:

被设计在内部使用, 通常作为 series() 或 parallel() 组合的组成部分.

公/私有任务在外观和行为上和其他任务是一样的, 但私有任务不能够被用户直接调用, 如果需要将一个任务注册为公开类型, 只需从 gulpfile 中导出即可

// gulpfile文件
const { series } = require('gulp');

function clean(cb){
    cb()
}
function build(cb){
    cb()
}
exports.build = build;
exports.default = series(clean,build);
// 上述的两个func, 其中clean没被export因此被认为是私有任务, build被export了则成为一个公开的任务.
// 但是无论公开私有, 都可以组合在一个方法中被导出

组合任务

gulp 提供了两个强大的组合方法: series()和parallel(). 两个方法可以相互嵌套

series()

让任务按顺序执行

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

function transpile(cb) {
  // body omitted
  cb();
}

function bundle(cb) {
  // body omitted
  cb();
}

exports.build = series(transpile, bundle);

parallel()

可以令任务并发的执行

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

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

处理文件

src()

接受 glob 参数, 并从文件系统读取文件然后生成一个 Node流(stream)

**流数据: 就是字节数据, 在应用程序中各种对象之间交换和传输数据的时候, 总是先将对象中所包含的数据转化为字节数据再通过流的传输, 到达目的对象后, 再将流数据转化为对象中可以使用的数据. 因此, 流就是一种传输数据的手段, 是一组有序的, 有起点和终点的字节数据传输手段.

// 由 src 产生的流, 应当从任务中返回并发出异步完成的信号.
const { src, dest } = require('gulp');
const babel = require('gulp-babel');

exports.default = function(){
    return src('src/*.js')
    .pipe(babel())
    .pipe(dest('output'))
}
// 在gulp中, 处理流的主要API方法是 .pipe()方法. 用于连接转换流或可写流
// 上述例子: 通过src处理所有的 *.js 的文件, 利用 .pipe 把目标文件交给 babel 进行二次处理=>输出到output目录. 其中 dest 一般作为终止流

src()亦可放在 .pipe 的中间, 以给定的 glob 向流中添加新的文件.

分阶段输出:

const { src, dest } = require('gulp');
const babel = require('gulp-babel');	// babel, 可以将 es6 的语法进行编译, 转为 es5 语法
const uglify = require('gulp-uglify');  // uglify, 一款用于压缩js文件的插件
const rename = require('gulp-rename');  // rename, 将目标文件进行重命名

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}
// 上述例子: 用 src 把所有的js文件引入, 通过pipe传输到 babel 中进行处理, 再到dest进行输出. 然后再把输出的目录文件进行压缩, 重命名, 输出

其他API

watch

const { watch } = require('gulp');

watch(['input/*.js', '!input/something.js'], function(cb) {
  // body omitted
  cb();
});
// 例子:
gulp.task('auto',function(){
    gulp.watch(srcLess), ['less']).on('change',browserSync.reload) // srcLess为一个less的打包目录, 监听当less打包发生变化时, 利用 browserSync 对所有端进行重载
})
// watch(globs,[options],[task]) 方法原型
// 用于对gulp进行运行时, 监听 globs 在发生更改时,作出相应逻辑