小程序序列3-gulp的使用

gulp的基本使用

1、gulp官网
2、gulp的使用以及Gulp新手入门教程
3、gulp构建项目系列文章
4、--------重要------【微信小程序】- 用Gulp搭建微信小程序项目

一、基本使用

1、dev环境安装gulp
npm install --save-dev gulp
或者指定版本配置

"devDependencies": {
  "gulp": "^4.0.2"
},

2、创建gulpfile.js文件,执行gulp命令是会查找该文件运行

function defaultTask(cb) {
    console.log('----------------启动gulp任务----------------');
    // place code for your default task here
    cb();
}
exports.default = defaultTask;

3、创建运行命令, gulp默认执行 gulpfile.js 的exports.default命令

"scripts": {
  "gulpTest": "gulp"
},

最终效果


image.png

4、执行命令
npm run gulpTest

image.png

以上步骤就简单构建了gulp的最基本框架

二、任务

1、task() - 方法用来将函数注册为任务
2、series() - 让task任务按顺序执行
3、parallel() - 以最大并发运行任务tasks

旧版 gulp.task(name[, deps], fn) 方法用来将函数注册为任务(task)。该 API 依旧可以使用,但是 导出(export)将会是主要的注册机制


image

1、package.json文件修改gulpTset命令为

"scripts": {
  "gulpTest": "gulp dev"
},

2、gulpfile.js创建dev任务

const { task, series, parallel } = require('gulp');
function clean(cb) {
    console.log('---------clean任务---------');
    cb();
}
function css(cb) {
    console.log('---------css任务---------');
    cb();
}
function javascript(cb) {
    console.log('---------javascript任务---------');
    cb();
}

exports.dev = series(clean, parallel(css, javascript));
// exports等价于task
// task('dev', series(clean, parallel(css, javascript)));

3、执行npm run gulpTest

image.png

三、异步执行

当从任务(task)中返回 stream、promise、event emitter、child process 或 observable 时,成功或错误值将通知 gulp 是否继续执行或结束。如果任务(task)出错,gulp 将立即结束执行并显示该错误。

当使用 series() 组合多个任务(task)时,任何一个任务(task)的错误将导致整个任务组合结束,并且不会进一步执行其他任务。当使用 parallel() 组合多个任务(task)时,一个任务的错误将结束整个任务组合的结束,但是其他并行的任务(task)可能会执行完,也可能没有执行完。

四、处理文件

1、src(glob参数 [,options]) - 读取文件生成一个流(stream)
注意:

  1. globs是字符串或数组,表示待处理文件的路径,注意该路径相对于gulpfile.js所在位置

  2. globs写法中,“app/**/*.js”表示app目录下的任意子目录下的后缀为js的所有文件

  3. options配置中最常用的是base:'文件路径',指定与不指定base的区别在于处理后的文件的位置。请看下图:写了base 会只删掉client保留了js

    image

2、pipe() - 用于连接转换流或可写流

3、dest(输出路径path [,options]) -
接受一个输出目录作为参数,当接收到管道(pipeline)传输的文件时,将文件内容及文件属性写入到指定的目录中
1、path可以是路径字符串或函数,当是函数时,该函数必须返回字符串
2、options可配置cwd和mode,用得不多

PS:大多数情况下,利用 .pipe() 方法将插件放置在 src() 和 dest() 之间,并转换流(stream)中的文件

四、Glob 详解

1、glob 是由普通字符和/或通配字符组成的字符串,用于匹配[文件路径],可以利用一个或多个 glob 在文件系统中定位文件
2、globs是字符串或数组,表示待处理文件的路径,注意该路径相对于gulpfile.js所在位置

*.js :在一个字符串匹配任意数量的字符,用于匹配【单级目录】下的文件

例子:*.js
能够匹配类似 单级index.js,但不能匹配 scripts/index.js 或 scripts/nested/index.js

**/*.js :匹配当前目录及其子目录下的所有js文件, 用于匹配【嵌套目录】下的文件

例子:scripts/**/*.js
被适当地限制在 scripts/ 目录下。它将匹配类似 scripts/index.js、scripts/nested/index.js 和 scripts/nested/twice/index.js

! (取反)
取反必须跟在一个非取反的 glob 后面。第一个 glob 匹配到一组匹配项,然后后面的取反 glob 删除这些匹配项中的一部分

例子:
['script/**/*.js', '!scripts/vendor/']
['**/*.js', '!node_modules/']

*.+(scss|sass) :+号后面会跟着圆括号,里面的元素用|分割,匹配多个选项。这里将匹配scss和sass文件

五、文件监控

1、gulp.watch的两种使用方法
2、使用插件gulp-watch监听-不建议,应该使用新的,可以参考

watch()将globs 与 任务(task)进行关联。它对匹配 glob 的文件进行监控,文件被修改了就执行关联的任务(task)

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
监听文件,一旦文件发生改变就会执行tasks数组中指定的任务,或者执行cb函数,并触发watcher的change事件

可监控的事件
默认只有创建、更改或删除文件监控程序就会执行关联的任务, 其他可通过 events 参数指定,事件有 'add'、'addDir'、'change'、'unlink'、'unlinkDir'、'ready'、'error'。
此外,还有一个 'all' 事件,它表示除 'ready' 和 'error' 之外的所有事件

gulp-watch使用说明及要求
1)尽可能的将监听任务拆开
2)减少开发模式下的功耗:比如不进行压缩处理,特别是图片的压缩需要时间较长,这就需要判断当前是开发环境还是生产环境

监控page下面所有js文件,有变化就执行jsChange方法

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

function clean(cb) {
    console.log('---------clean任务---------');
    cb();
}

function jsChange() {
    console.log('---------jsChange---------');
}

/**
 * 监控page下面所有js文件的增删改
 */
function watchPage() {
    console.log('---------watchPage---------');
    // 监控page下面所有js文件的增删改
    let watcher = watch('pages/**/*.js', () => {
        console.log('---------watch回调,在change add unlink执行完回调--------');
    });
    // 修改触发
    watcher.on('change', function(filepath) {
        console.log('---------修改触发:', filepath);
    });

    // 添加触发
    watcher.on('add', function(filepath) {
        console.log('---------添加触发:', filepath);
    });
    // 删除触发
    watcher.on('unlink', function(filepath) {
        console.log('---------删除触发:', filepath);
    });
    return watcher;
}

task('dev', series(clean, parallel(jsChange, watchPage)));
六、插件

Gulp 插件实质上是Node 转换流,它封装了通过管道(pipeline)转换文件的常见功能,通常是使用 .pipe() 方法并放在 src()dest() 之间。可以更改经过流(stream)的每个文件的文件名、元数据或文件内容

可以在 插件搜索页面 搜索需要的插件。

插件应当总是用来转换文件的。其他操作都应该使用(非插件的) Node 模块或库来实现。

1、gulp简单插件
gulp-imagemin 压缩图片
gulp-sass 将scss文件转为css
gulp-postcss 与autoprefixer配合使用
gulp-open 默认浏览器打开指定页面
gulp-htmlmin 最小化html文件
gulp-minify-css 最小化css(gulp-clean-css也是)
gulp-uglify 混淆js文件
gulp-concat 合并js,css文件

2、复杂插件
gulp-replace 对指定文件内容进行替换,可以用正则
gulp-usemin 将html中外链的css和js文件
gulp-zip 将文件打包成zip
gulp-sequence 串行执行任务,相对于gulp.task中依赖的任务是并行执行的
gulp-rev-all 对js或css文件加MD5戳,缓存用

3、其他node模块
del 删除指定目录下所有文件
autoprefixer 自动加浏览器前缀
browser-sync 文件内容变化浏览器自动刷新
yargs 处理node命令传入的参数
cross-env 跨platform的命令处理,用法:cross-env NODE_ENV=production webpack --config build/webpack.config.js,若不加cross-env,window系统下报错

你可能感兴趣的:(小程序序列3-gulp的使用)