Gulp now pretty formats JS and CSS

gulpfile.js

@@ -4,7 +4,7 @@ var gulp = require('gulp'),
 	concat = require('gulp-concat'),
 	header = require('gulp-header'),
 	pkg = require('./package.json'),
-	beautify = require('gulp-beautify');
+	prettify = require('gulp-jsbeautifier');
 
 var banner = ['/**',
 	' * <%= pkg.name %> v<%= pkg.version %>',
@@ -46,10 +46,16 @@ gulp.task('styles', function() {
 		.pipe(gulp.dest('dist'));
 });
  
-gulp.task('beautify', function() {
+gulp.task('prettify-js', function() {
 	gulp.src('./src/js/simplemde.js')
-		.pipe(beautify({indentSize: 4}))
-		.pipe(gulp.dest('./src/js/test'))
+		.pipe(prettify({js: {braceStyle: "collapse", indentChar: "\t", indentSize: 1, maxPreserveNewlines: 3, spaceBeforeConditional: false}}))
+		.pipe(gulp.dest('./src/js'));
 });
  
-gulp.task('default', ['scripts', 'styles', 'beautify']);
+gulp.task('prettify-css', function() {
+	gulp.src('./src/css/simplemde.css')
+		.pipe(prettify({css: {indentChar: "\t", indentSize: 1}}))
+		.pipe(gulp.dest('./src/css'));
+});
+
+gulp.task('default', ['scripts', 'styles', 'prettify-js', 'prettify-css']);

package.json

@@ -20,7 +20,7 @@
 		"gulp-uglify": "*",
 		"gulp-concat": "*",
 		"gulp-header": "*",
-		"gulp-beautify": "*"
+		"gulp-jsbeautifier": "*"
 	},
 	"repository": {
 		"type": "git",

src/css/simplemde.css

@@ -13,7 +13,7 @@
 }
 
 .CodeMirror-fullscreen {
-	background:#fff;
+	background: #fff;
 	position: fixed !important;
 	top: 50px;
 	left: 0;
@@ -43,7 +43,8 @@
 	border-top-right-radius: 4px;
 }
 
-.editor-toolbar:after, .editor-toolbar:before {
+.editor-toolbar:after,
+.editor-toolbar:before {
 	display: block;
 	content: ' ';
 	height: 1px;
@@ -57,7 +58,9 @@
 	margin-top: 8px
 }
 
-.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover {
+.editor-toolbar:hover,
+.editor-wrapper input.title:focus,
+.editor-wrapper input.title:hover {
 	opacity: .8
 }
 
@@ -89,7 +92,8 @@
 	cursor: pointer;
 }
 
-.editor-toolbar a.active, .editor-toolbar a:hover {
+.editor-toolbar a.active,
+.editor-toolbar a:hover {
 	background: #fcfcfc;
 	border-color: #95a5a6;
 }
@@ -112,8 +116,8 @@
 	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 	font-size: 65%;
 	vertical-align: text-bottom;
-	position:relative;
-	top:2px;
+	position: relative;
+	top: 2px;
 }
 
 .editor-toolbar a.fa-header-1:after {
@@ -157,8 +161,8 @@
 .editor-preview {
 	padding: 10px;
 	position: absolute;
-	width:100%;
-	height:100%;
+	width: 100%;
+	height: 100%;
 	top: 0;
 	left: 0;
 	background: #fafafa;
@@ -184,23 +188,28 @@
 }
 
 .editor-preview-active-side {
-  display: block
+	display: block
 }
 
 .editor-preview-active {
 	display: block
 }
 
-.editor-preview>p, .editor-preview-side>p {
+.editor-preview>p,
+.editor-preview-side>p {
 	margin-top: 0
 }
 
-.editor-preview pre, .editor-preview-side pre {
+.editor-preview pre,
+.editor-preview-side pre {
 	background: #eee;
 	margin-bottom: 10px;
 }
 
-.editor-preview table td, .editor-preview table th, .editor-preview-side table td, .editor-preview-side table th {
+.editor-preview table td,
+.editor-preview table th,
+.editor-preview-side table td,
+.editor-preview-side table th {
 	border: 1px solid #ddd;
 	padding: 5px;
 }

src/js/simplemde.js

@@ -125,7 +125,7 @@ function toggleFullScreen(editor) {
 
 	// Hide side by side if needed
 	var sidebyside = cm.getWrapperElement().nextSibling;
-	if (/editor-preview-active-side/.test(sidebyside.className))
+	if(/editor-preview-active-side/.test(sidebyside.className))
 		toggleSideBySide(editor);
 }
 
@@ -287,7 +287,7 @@ function toggleSideBySide(editor) {
 	var preview = wrapper.nextSibling;
 	var toolbarButton = editor.toolbarElements["side-by-side"];
 
-	if (/editor-preview-active-side/.test(preview.className)) {
+	if(/editor-preview-active-side/.test(preview.className)) {
 		preview.className = preview.className.replace(
 			/\s*editor-preview-active-side\s*/g, ''
 		);
@@ -295,11 +295,11 @@ function toggleSideBySide(editor) {
 		wrapper.className = wrapper.className.replace(/\s*CodeMirror-sided\s*/g, ' ');
 	} else {
 		/* When the preview button is clicked for the first time,
-		* give some time for the transition from editor.css to fire and the view to slide from right to left,
-		* instead of just appearing.
-		*/
+		 * give some time for the transition from editor.css to fire and the view to slide from right to left,
+		 * instead of just appearing.
+		 */
 		setTimeout(function() {
-			if (!cm.getOption("fullScreen")) toggleFullScreen(editor);
+			if(!cm.getOption("fullScreen")) toggleFullScreen(editor);
 			preview.className += ' editor-preview-active-side'
 		}, 1);
 		toolbarButton.className += ' active';
@@ -366,7 +366,7 @@ function togglePreview(editor) {
 
 	// Turn off side by side if needed
 	var sidebyside = cm.getWrapperElement().nextSibling;
-	if (/editor-preview-active-side/.test(sidebyside.className))
+	if(/editor-preview-active-side/.test(sidebyside.className))
 		toggleSideBySide(editor);
 }
 
@@ -408,56 +408,47 @@ function _toggleHeading(cm, direction, size) {
 			var text = cm.getLine(i);
 			var currHeadingLevel = text.search(/[^#]/);
 
-			if(direction !== undefined){
-				if (currHeadingLevel <= 0) {
-					if (direction == 'bigger') {
+			if(direction !== undefined) {
+				if(currHeadingLevel <= 0) {
+					if(direction == 'bigger') {
 						text = '###### ' + text;
 					} else {
 						text = '# ' + text;
 					}
-				} else if (currHeadingLevel == 6 && direction == 'smaller') {
+				} else if(currHeadingLevel == 6 && direction == 'smaller') {
 					text = text.substr(7);
-				} else if (currHeadingLevel == 1 && direction == 'bigger') {
+				} else if(currHeadingLevel == 1 && direction == 'bigger') {
 					text = text.substr(2);
 				} else {
-					if (direction == 'bigger') {
+					if(direction == 'bigger') {
 						text = text.substr(1);
 					} else {
 						text = '#' + text;
 					}
 				}
-			}
-			else{
-				if(size == 1){
-					if (currHeadingLevel <= 0) {
+			} else {
+				if(size == 1) {
+					if(currHeadingLevel <= 0) {
 						text = '# ' + text;
-					}
-					else if(currHeadingLevel == size){
+					} else if(currHeadingLevel == size) {
 						text = text.substr(currHeadingLevel + 1);
-					}
-					else{
+					} else {
 						text = '# ' + text.substr(currHeadingLevel + 1);
 					}
-				}
-				else if(size == 2){
-					if (currHeadingLevel <= 0) {
+				} else if(size == 2) {
+					if(currHeadingLevel <= 0) {
 						text = '## ' + text;
-					}
-					else if(currHeadingLevel == size){
+					} else if(currHeadingLevel == size) {
 						text = text.substr(currHeadingLevel + 1);
-					}
-					else{
+					} else {
 						text = '## ' + text.substr(currHeadingLevel + 1);
 					}
-				}
-				else{
-					if (currHeadingLevel <= 0) {
+				} else {
+					if(currHeadingLevel <= 0) {
 						text = '### ' + text;
-					}
-					else if(currHeadingLevel == size){
+					} else if(currHeadingLevel == size) {
 						text = text.substr(currHeadingLevel + 1);
-					}
-					else{
+					} else {
 						text = '### ' + text.substr(currHeadingLevel + 1);
 					}
 				}
@@ -719,7 +710,7 @@ var toolbarBuiltInButtons = {
 	}
 };
 
-var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|",  "preview", "side-by-side", "fullscreen", "guide"];
+var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen", "guide"];
 
 /**
  * Interface of SimpleMDE.
@@ -762,7 +753,7 @@ SimpleMDE.toolbar = toolbar;
 SimpleMDE.markdown = function(text) {
 	if(window.marked) {
 		// Update options
-		if(this.options.singleLineBreaks !== false){
+		if(this.options.singleLineBreaks !== false) {
 			marked.setOptions({
 				breaks: true
 			});
@@ -903,7 +894,7 @@ SimpleMDE.prototype.createSidebyside = function() {
 	var wrapper = cm.getWrapperElement();
 	var preview = wrapper.nextSibling;
 
-	if (!/editor-preview-side/.test(preview.className)) {
+	if(!/editor-preview-side/.test(preview.className)) {
 		preview = document.createElement('div');
 		preview.className = 'editor-preview-side';
 		wrapper.parentNode.insertBefore(preview, wrapper.nextSibling);
@@ -913,7 +904,11 @@ SimpleMDE.prototype.createSidebyside = function() {
 	var cScroll = false;
 	var pScroll = false;
 	cm.on('scroll', function(v) {
-	if (cScroll){cScroll=false; return;}; pScroll=true;
+		if(cScroll) {
+			cScroll = false;
+			return;
+		};
+		pScroll = true;
 		height = v.getScrollInfo().height - v.getScrollInfo().clientHeight;
 		ratio = parseFloat(v.getScrollInfo().top) / height;
 		move = (preview.scrollHeight - preview.clientHeight) * ratio;
@@ -922,7 +917,11 @@ SimpleMDE.prototype.createSidebyside = function() {
 
 	// Syncs scroll  preview -> editor
 	preview.onscroll = function(v) {
-	if (pScroll){pScroll=false; return;}; cScroll=true;
+		if(pScroll) {
+			pScroll = false;
+			return;
+		};
+		cScroll = true;
 		height = preview.scrollHeight - preview.clientHeight;
 		ratio = parseFloat(preview.scrollTop) / height;
 		move = (cm.getScrollInfo().height - cm.getScrollInfo().clientHeight) * ratio;
@@ -939,7 +938,7 @@ SimpleMDE.prototype.createToolbar = function(items) {
 	}
 
 	for(var i = 0; i < items.length; i++) {
-		if(toolbarBuiltInButtons[items[i]] != undefined){
+		if(toolbarBuiltInButtons[items[i]] != undefined) {
 			items[i] = toolbarBuiltInButtons[items[i]];
 		}
 	}