gulp小记2

browser-sync del

构建步骤

  1. 清除构建目录
  2. 运行编译代码任务
  3. 启动服务器
  4. 检测变化,实时更新
npm i browser-sync del -D
const browserSync = require('browser-sync').create();
const del = require('del');

function server(done) {
  browserSync.init({
    server: {
      baseDir: './dist/'
    }
  });
  done();
}

function cleanDist() {
  return del(['./dist'])
}
exports.watch = gulp.series(
  cleanDist,
  gulp.parallel(dealJS, dealCss...),
  server,
  function watcher(done) {
    gulp.watch('src/**/*.scss', dealCss);
    gulp.watch('src/**/*.es6', dealJS);
    // ...
    gulp.watch('dist/**/*', browserSync.reload);
    done();
  }
);

glob

gulp使用gulp.src创建文件可读流,选择处理的文件,用gulp.dest定义文件可写流,指定文件保存位置,gulp使用了glob的匹配模式来匹配路径名

匹配符 匹配规则
* 匹配任意数量的任意字符
? 匹配任意一个字符
[...] 匹配任意一个方括号中给定的字符,方括号中可以是字符集或字符范围
[!...] 匹配方括号中给定字符以外的一个字符

glob不匹配分隔符/(forward slash)

Node的glob支持更多的规则,比如**匹配任意数量的字符串,如果文件结构为:

src
 ├── script
  |    └── a.js
 └── b.js

src/*.js可以匹配到b.js,src/**/*.js可以匹配到a.js和b.js

更多规则

匹配符 匹配规则
!(pattern|pattern|pattern) 匹配除给定pattern之外的
?(pattern|pattern|pattern) 匹配0个或1个给定pattern
+(pattern|pattern|pattern) 匹配1个或多个给定pattern
*(a|b|c) 匹配任意个给定pattern
@(pattern|pat*|pat?erN) 完全匹配提供的一种pattern

单独使用可以安装Node glob GitHub - isaacs/node-glob: glob functionality for node.js

npm install glob -D
const glob = require('glob');
glob('src/**/*.js', function (err, files) {
    // files是所有匹配到的文件路径数组
})

minimist

可以用来解析命令行参数

npm install minimist -D

如果执行

gulp taskName -m abc

可以用minimist(process.argv.slice(2))获取参数

例如在执行gulp task的时候指定目录

const minimist = require('minimist');
const { m = '**'} = minimist(process.argv.slice(2));
const filePath = `/src/${m}/**/*.js`;

task('js', () => src(filePath).pipe(....))
// m为 'abc'
Comments
Write a Comment