gulp

自定义插件

要实现一个自定义的 Gulp 插件来读取文件内容并替换其中的 “abc” 为 “efg”，你可以使用 Node.js 的 stream.Transform 类来创建一个转换流。以下是一个示例代码：

const { Transform } = require('stream');
const through = require('through2');
const PluginError = require('plugin-error');


// 完整版
function gulpReplace() {
  return through.obj(function(file, encoding, callback) {
    if (file.isNull()) {
      return callback(null, file);
    }

    if (file.isStream()) {
      return callback(new PluginError(PLUGIN_NAME, 'Streaming not supported'));
    }

    if (file.isBuffer()) {
      try {
        let contents = file.contents.toString();
        contents = contents.replace(/abc/g, 'efg');
        file.contents = Buffer.from(contents);
        this.push(file);
      } catch (error) {
        return callback(new PluginError(PLUGIN_NAME, error));
      }
    }

    callback(null, file);
  });
}


// 简洁版
function replaceA() {
    return new Transform({
        objectMode: true, // 为true时，file参数为对象
        transform(file, encoding, callback) {
            file.contents = Buffer.from(file.contents.toString().replace(/index/g, 'idx'))
            callback(null, file);
        }
    });
}


// 使用示例
const gulp = require('gulp');

gulp.task('replace', function() {
  return gulp.src('src/*.txt')
    .pipe(gulpReplace())
    .pipe(gulp.dest('dist/'));
});

在上面的示例中，我们首先引入了 stream.Transform 类。然后，我们定义了一个名为 replaceABC 的函数，它返回一个转换流。在转换流的 transform 方法中，我们将接收到的数据块转换为字符串，并使用正则表达式 /abc/g 将其中的 “abc” 替换为 “efg”。然后，我们通过 this.push(data) 将转换后的数据块推送到流中，并通过 callback() 表示转换完成。

在使用示例中，我们使用 Gulp 的 gulp.src 方法选择要处理的文件，然后通过 pipe 方法将文件流传递给 replaceABC 转换流进行处理。最后，我们使用 gulp.dest 方法将处理后的文件保存到目标目录中。

自定义插件

https://gulpjs.com/docs/en/getting-started/using-plugins

gulp 常见配置参考

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');
const htmlmin = require('gulp-htmlmin');
const less = require('gulp-less');
var clean = require('gulp-clean');

// 打包 JavaScript 文件
gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// 打包 CSS 文件
gulp.task('styles', function() {
  return gulp.src('src/css/*.css')
    .pipe(concat('styles.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('less', function() {
  return gulp.src('src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

// 压缩图片
gulp.task('images', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

// 压缩 HTML 代码
gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

gulp.task('clean', function() {
  return .src('app/tmp/index.js')
        .pipe(clean({force: true}))
        .pipe(gulp.dest('dist'));
});


// 默认任务，同时执行所有任务
gulp.task('default', gulp.server('clean', gulp.parallel('scripts', 'styles', 'images', 'html')));

使用Node监听文件流操作完成

gulp.task('getTitles', (done) => {
  let titles = [];

  gulp.src('./js/*.js')
    .pipe(replace(/(?<=\$t\([\"\']).+?(?=[\"\'][\)\,])/g, function handleReplace(match) {
      console.log('match:', match);
      titles = [...titles, match];
      return `i18n_${Md5(match)}`;
    }))
    .pipe(gulp.dest('./dist/js'))
    .on('end', function() {
      // 文件处理完成后执行的操作
      console.log('File processing completed');
      // 执行其他操作
      done();
    });
});

gulp常用插件

1. gulp-concat：用于合并多个文件为一个文件。
2. gulp-uglify：用于压缩 JavaScript 文件。
3. gulp-clean-css：用于压缩 CSS 文件。
4. gulp-imagemin：用于压缩图片文件。
5. gulp-htmlmin：用于压缩 HTML 代码。
6. gulp-sass：用于编译 Sass 文件为 CSS 文件。
7. gulp-autoprefixer：用于自动添加 CSS 前缀。
8. gulp-babel：用于将 ES6+ 代码转换为 ES5 代码。
9. gulp-rename：用于重命名文件。
10. gulp-sourcemaps：用于生成源映射文件，方便调试压缩后的代码。
11. gulp-watch：用于监视文件变化并执行相应任务。
12. gulp-livereload：用于自动刷新浏览器。
13. gulp-rev：用于给文件名添加哈希值，用于缓存处理。
14. gulp-rev-replace：用于替换 HTML 文件中的引用路径，以匹配哈希值。
15. gulp-notify：用于在任务完成时发送通知。
16. gulp-clean 删除文件夹