Feature Request: Add simple example project that can be used for testing during development.

[Anthony Del Ciotto]

I thought it could be a nice idea if there was a simple example project within the repository that could be launched with an express server using a grunt _dev_ task and then edited while debugging.

Within this dev task, the watch task could be run to rebuild all files on any changes utilising livereload and css injection. This could make for really nice debugging.

So for example, in the grunt file you could have something like this:

....

express: {
      all: {
        options: {
          port: 6080,
          hostname: "0.0.0.0",
          bases: ['example'],  // working on the assumption that the example project is in root/example
        }
      }
    },

watch: {
     options: { livereload: true }
     stylesheets: {
        files: ['dist/timesheet.css'],
      }
      sass: {
        files: ['source/stylesheets/timesheet.css.sass'],
        tasks: ['sass'],
        options: {livereload: false } // dont live reload on sass changes, but on css changes instead for injection
      },
      scripts: {
        files: ['Gruntfile.js', 'source/javascripts/timesheet.bubble.js', 'source/javascripts/timesheet.js'],
        tasks: ['jshint', 'uglify']
      }
    },
  });

  grunt.registerTask('lint', 'Perform a lint on all the js source files', ['jshint']);
  grunt.registerTask('build', 'minify all js source files', ['lint', 'uglify']);
  grunt.registerTask('dev', 'Watch all js and css files for changes and rebuld appropriatly',
                    ['lint', 'build', 'express', 'watch']);

Furthermore, a source map could be used in the uglify task for nice in browser debugging in the chrome tools:

 uglify: {
      target: {
        options: {
          sourceMap: true,
          sourceMapIncludeSources: true,
          sourceMapRoot: 'source/javascripts'
        },
        files: { 'dist/timesheet.js': 'source/javascripts/timesheet.bubble.js', 'source/javascripts/timesheet.js' }
      },
    },

I have a js project template i usually use, it has a working build file with these features, here is the gruntfile and a blog post describing it.

Is this something anybody would want me to implement ?

[Sebastian Müller]

You can run a development server using middleman which will host the site available at https://sbstjn.github.io/timesheet.js on localhost:4567. middleman build creates the static files for the gh-pages branch.

grunt runs the unit tests and performs JSHint checks, grunt build will create the minified .js and .css files …

Feel free to migrate the middleman part to grunt 😍

[Sebastian Müller]

#41

I removed the middleman dependencies …