使用 js-beautify 和 Gulp 在保存时美化 JS

Question

我正在使用 js-beautify 和 Gulp 在保存时美化 JavaScript。

我无法使用gulp.src 和gulp.dest 管道。它给出了错误

dest.on('unpipe', onunpipe);

于是我使用了下面的代码，达到了我想要的结果。

gulp.task("jsbeautify", function () {
    const fs = require('fs');
    gulp.watch(config.srcTest).on("change", function (file) {
        console.log("Updating file");
        const destPath = file.path.replace(/\/[^/]*.js/g, " ");
        const fileContent = fs.readFileSync(file.path, "utf8");
        fs.writeFileSync(file.path, jsBeautify(fileContent, {indent_size: 2}));
    });
});

js-beautify 中的文档没有提供修改或写入文件的示例。所以我使用了fs。

有没有更好的方法呢？也许将gulp.src 与管道一起使用。

Answer 1

无论你想用 gulp 做什么，可能有一个包已经做得很好了。

使用js-beautify 和gulp-jsbeautify 包进行美化就是这种情况。

到modify files in place using gulp，调用gulp.src时设置base选项，使用./作为目的地。

var gulp = require('gulp');
var prettify = require('gulp-jsbeautifier');

gulp.task('prettify', function() {
  return gulp.src(config.srcTest, {base: "./"})
    .pipe(prettify())
    .pipe(gulp.dest('./'));
});

gulp.task('watch', function() {
  gulp.watch(config.srcTest, ['prettify']);
});

然后调用gulp watch 将启动观察者。

“美化选项”与以下划线选项相同 js-美化。有关它们的列表，请参阅 js-beautify 文档。

所有放置在根目录中的“美化选项”，都适用于 CSS、HTML 和 JavaScript，除非没有特定选项。

通过 gulp 中的参数给出的选项与那些合并 通过文件给出。合并顺序为：默认值， 配置文件，参数。后续选项覆盖 以前的。

这意味着您可以直接在 gulp 任务中将任何默认的 js-beautify 选项传递给插件。

.pipe(prettify({
  indent_level: 4, // applied to CSS, HTML, JS
  js: {
    indent_level: 2 // applied to JS only
  }
))

但我强烈建议您将选项放入项目根目录下的 JSON 格式 .jsbeautifyrc 文件中。

• 你用js-beautify比较清楚
• IDE插件可以直接读取并集成js-beautify的好处

---

有关 gulp 的更多灵活性，请参阅How can I write a simple gulp pipe function?