update gulpfile and add a linter

gulpfile.js

@@ -1,88 +1,91 @@
-var gulp    = require( 'gulp' ),
+var gulp = require('gulp'),
-    stylus  = require( 'gulp-stylus' ),
+  $ = require('gulp-load-plugins')(),
-    plates  = require( 'gulp-plates' ),
+  nib = require('nib'),
-    rename  = require( 'gulp-rename' ),
+  fs = require('fs'),
-    vulcan  = require( 'gulp-vulcanize' ),
+  marked = require('marked'),
-    insert  = require( 'gulp-insert' ),
+  karma = require('karma');
-    replace = require( 'gulp-replace' ),
-    clean   = require( 'gulp-clean' ),
-    nib     = require( 'nib' ),
-    fs      = require( 'fs' ),
-    marked  = require( 'marked' ),
-    karma   = require( 'karma' );
 
-gulp.task( 'default', [ 'docs', 'build' ] );
+gulp.task('default', ['docs', 'build']);
 
-gulp.task( 'watch', [ 'default' ], function() {
+gulp.task('watch', ['default'], function() {
-    
-    karma.server.start( {
-        frameworks: [ 'jasmine' ],
-        files: [
-          'build/gui.js',
-          'tests/*.js'
-        ]
-    } );
 
-    gulp.watch( [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js', 'gui.html' ], [ 'build' ] );
+  karma.server.start({
-    gulp.watch( [ 'README.md', 'docs/*' ], [ 'docs' ] );
+    frameworks: ['jasmine'],
+    files: [
+      'build/gui.js',
+      'tests/*.js'
+    ]
+  });
 
-} );
+  gulp.watch(['elements/**/*.styl', 'elements/**/*.html',
+              'elements/**/*.js', 'gui.html'], ['build']);
+  gulp.watch(['README.md', 'docs/*'], ['docs']);
 
-gulp.task( 'build', [ 'vulcanize' ], function() {
+});
 
-    return gulp.src( 'build/gui.html' )
+gulp.task('build', ['vulcanize'], function() {
-               .pipe( replace( /\\/g, "\\\\" ) )
-               .pipe( replace( /'/g, "\\'" ) )
-               .pipe( replace( /^(.*)$/gm, "'$1'," ) )
-               .pipe( insert.wrap( 'document.write([', '].join("\\n"))' ) )
-               .pipe( rename( 'gui.js' ) )
-               .pipe( gulp.dest( 'build' ) );
 
-} );
+  return gulp.src('build/gui.html')
+         .pipe($.replace(/\\/g, '\\\\'))
+         .pipe($.replace(/'/g, "\\'"))
+         .pipe($.replace(/^(.*)$/gm, "'$1',"))
+         .pipe($.insert.wrap('document.write([', '].join("\\n"))'))
+         .pipe(rename('gui.js'))
+         .pipe(gulp.dest('build'));
 
-gulp.task( 'vulcanize', [ 'css' ], function() {
+});
 
-    return gulp.src( 'gui.html' )
+gulp.task('vulcanize', ['css'], function() {
-               .pipe( vulcan( { 
-                   dest: 'build', 
-                   inline: true,
-                   strip: true 
-                } ) );
 
-} );
+  return gulp.src('gui.html')
+         .pipe($.vulcanize({
+           dest: 'build',
+           inline: true,
+           strip: true
+        }));
 
-gulp.task( 'css', function() {
+});
 
-    return css( 'elements/**/*.styl', 'elements' );
+gulp.task('lint', function() {
+  return gulp.src('elements/**/*.js')
+    //.pipe($.reload({stream: true, once: true}))
+    .pipe($.jshint())
+    .pipe($.jshint.reporter('jshint-stylish'));
+    //.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
+});
 
-} );
+gulp.task('css', function() {
 
-gulp.task( 'docs', function() {
+  return css('elements/**/*.styl', 'elements');
-        
-    css( 'docs/*.styl', 'docs' );
 
-    var content = {
+});
-        readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
-    };
 
-    return gulp.src( 'docs/template.html' )
+gulp.task('docs', function() {
-        .pipe( plates( content ) )
-        .pipe( rename( 'index.html' ) )
-        .pipe( gulp.dest( './' ) );
 
-} );
+  css('docs/*.styl', 'docs');
 
-gulp.task( 'clean', function() {
+  var content = {
+    readme: marked(fs.readFileSync('README.md', 'utf8'))
+  };
 
-    return gulp.src( [ 'build/*', '**/*.css' ] )
+  return gulp.src('docs/template.html')
-               .pipe( clean() );
+    .pipe($.plates(content))
+    .pipe($.rename('index.html'))
+    .pipe(gulp.dest('./'));
 
-} );
+});
 
-function css( src, dest ) {
+gulp.task('clean', function() {
 
-    return gulp.src( src )
+  return gulp.src(['build/*', '**/*.css'])
-               .pipe( stylus( { use: [ nib() ] } ) )
+         .pipe($.clean());
-               .pipe( gulp.dest( dest ) );
 
-}
+});
+
+function css(src, dest) {
+
+  return gulp.src(src)
+         .pipe($.stylus({ use: [nib()] }))
+         .pipe(gulp.dest(dest));
+
+}

package.json

@@ -5,12 +5,15 @@
     "gulp": "^3.8.7",
     "gulp-clean": "^0.3.1",
     "gulp-insert": "^0.4.0",
+    "gulp-jshint": "^1.8.4",
+    "gulp-load-plugins": "^0.6.0",
     "gulp-plates": "0.0.5",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.4.0",
     "gulp-stylus": "^1.3.0",
     "gulp-vulcanize": "^1.0.0",
     "gulp-watch": "^0.6.9",
+    "jshint-stylish": "^0.4.0",
     "karma": "^0.12.23",
     "karma-chrome-launcher": "^0.1.4",
     "karma-jasmine": "^0.1.5",