Prettify JavaScript, JSON, HTML and CSS.
jsbeautifier.org for gulp.
Starting from next release, support for node <4 will be dropped.
npm install --save-dev gulp-jsbeautifier
var gulp = require('gulp');
var prettify = require('gulp-jsbeautifier');
gulp.task('prettify', function() {
gulp.src(['./*.css', './*.html', './*.js'])
.pipe(prettify())
.pipe(gulp.dest('./dist'));
});
All options are optional.
Type: Object
Default value: { file_types: [...] }
Contains specific "beautifier options" for CSS, HTML and JavaScript.
-
file_types
Type:Array
Default value forcss
:['.css', '.less', '.sass', '.scss']
Default value forhtml
:['.html']
Default value forjs
:['.js', '.json']
Specifies which files should be treated as CSS, HTML or JavaScript.
// Specifies that ONLY '*.js' and '.bowerrc' files should be treated as JavaScript.
gulp.task('prettify', function() {
gulp.src(['./*.js', './*.json', './.bowerrc'])
.pipe(prettify({
js: {
file_types: ['.js', '.bowerrc']
}
}))
.pipe(gulp.dest('./'));
});
Type: String
Default value: null
If a file is specified, the options defined in it will be loaded.
Otherwise, gulp-jsbeautifier will looking for a .jsbeautifyrc
file in this places and if found, load its options.
The file specified and the .jsbeautifyrc
file must be a valid JSON and can contain all the options of this documentation except config
and debug
.
// Use options specified in './config/jsbeautify.json'.
gulp.task('prettify', function() {
gulp.src('./*.js')
.pipe(prettify({
config: './config/jsbeautify.json'
}))
.pipe(gulp.dest('./dist'));
});
// Looking for a '.jsbeautifyrc' file and if found, use its options.
gulp.task('prettify', function() {
gulp.src('./*.js')
.pipe(prettify())
.pipe(gulp.dest('./dist'));
});
Type: Boolean
Default value: false
If false
shows no debug messages.
If true
shows useful debug messages.
If you have difficulty, try setting this to true
and use the reporter.
// Shows debug messages.
gulp.task('prettify', function() {
gulp.src(['./*.css', './*.html', './*.js'])
.pipe(prettify({
debug: true
}))
.pipe(gulp.dest('./dist'));
});
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 indentation is 4 for CSS and HTML instead is 2 for JavaScript.
gulp.task('prettify', function() {
gulp.src(['./*.css', './*.html', './*.js'])
.pipe(prettify({
indent_size: 4,
js: {
indent_size: 2
}
}))
.pipe(gulp.dest('./dist'));
});
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.
// 'config.json'
// 4 spaces indentation for CSS and HTML.
// 2 spaces indentation for JavaScript.
{
"indent_size": 4,
"indent_char": ' ',
// other options
"js": {
// other options
"indent_size": 2
}
}
// Overwrite the indentation specified in 'config.json' with
// one tab indentation for all CSS, HTML and JavaScript.
// All other options in 'config.json' are maintained.
gulp.task('prettify', function() {
gulp.src('./*.css', './*.html', './*.js')
.pipe(prettify({
config: './config.json',
indent_char: '\t',
indent_size: 1
}))
.pipe(gulp.dest('./'));
});
Checks if it is possible to beautify some files. The reporter is responsible for displaying the validate results and will emit an error before the stream ends if a file could be beautified.
var gulp = require('gulp');
var prettify = require('gulp-jsbeautifier');
gulp.task('validate', function() {
return gulp.src(['./*.css', './*.html', './*.js'])
.pipe(prettify.validate())
.pipe(prettify.reporter())
});
Lists files that have been beautified, those already beautified, and those that can not be beautified.
If the validate feature is used, the reporter lists files that can be beautified and emits an error before the stream ends if such a file was detected.
var gulp = require('gulp');
var prettify = require('gulp-jsbeautifier');
gulp.task('prettify', function() {
gulp.src(['./*.css', './*.html', './*.js'])
.pipe(prettify())
.pipe(prettify.reporter())
.pipe(gulp.dest('./'));
});
Type: number
Default value: prettify.report.BEAUTIFIED
Other values: prettify.report.ALL
With BEAUTIFIED value, the reporter lists only beautified files (or those that can be beautified in the case of validate).
With ALL value, the reporter also lists the other files.
var gulp = require('gulp');
var prettify = require('gulp-jsbeautifier');
gulp.task('prettify', function() {
gulp.src(['./*.css', './*.html', './*.js'])
.pipe(prettify())
.pipe(prettify.reporter({
verbosity: prettify.report.ALL
}))
.pipe(gulp.dest('./'));
});
gulp-jsbeautifier
is released under the MIT License.