使用带有 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 with the 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 的更多灵活性，请参阅

使用带有 Gulp 的 js-beautify 在保存时美化 JS

Prettify JS on save using js-beautify with Gulp

javascript

js-beautify

gulp

gulp-watch