2

我正在使用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与管道一起使用。

4

1 回答 1

2

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

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

要使用 gulp 修改文件，base请在调用时设置选项gulp.src并将./其用作目标。

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-beautify 使用的下划线选项相同。有关它们的列表，请参阅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
  }
))

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

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

有关 gulp 的更多灵活性，请参阅如何编写简单的 gulp 管道函数？

于 2017-04-18T02:23:46.597 回答