javascript - 使用带有 Gulp 的 js-beautify 在保存时美化 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 将启动观察器。

The "beautifier options" are the same underscored options used by js-beautify. See the js-beautify docs for a list of them.

All "beautifier options" placed in the root, are applied to CSS, HTML and JavaScript, unless there are no specific ones.

The options given through parameters in gulp are merged with those given through files. The merge order is: default values, configuration file, parameters. Subsequent options overwrite the previous ones.

这意味着您可以直接在 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 的更多灵 active ，请参阅 How can I write a simple gulp pipe function?