Grunt - start_server-watch-jshint-html_minify

Question

Write a grunt file to validate js files using jshint, minify html files, start the web server and watch the local web server.

• Validate js files with jshint.

• The source file is located in "src/js".

• Minify the html files in "src" folder and place it inside "dest/src" folder with same file name.

• After html minification, setup and run a local web server.

• Run the watch task to watch the webserver.

• Use the IDE terminal to install plugins.

• Use official grunt plugins only.

Answer 1

Install necessary grunt commands for all the below tasks and make sure the commands are saved in packages.json and try this:

module.exports = function(grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
  htmlmin: {                                     // Task
    dist: {                                      // Target
      options: {                                 // Target options
        removeComments: true,
        collapseWhitespace: true
      },
      files: {                                   // Dictionary of files
        'dest/src/form.html': 'src/form.html',     // 'destination': 'source'
        'dest/src/management.html': 'src/management.html'
      }
    }
  },
    watch: {
      styles: {
        files: ['less/**/*.less'], // which files to watch
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    },
connect: {
    server: {
      options: {
        port: 9000,
        base: 'app',
        keepalive: false
      }
    }
  }
  });

  grunt.registerTask('default', ['htmlmin','jshint','connect','watch']);
};