Unable to load the css files using Grunt - gruntjs

Question

[enter image description here][1]
I am not able to load the css files using gruntfile.js
Below is my gruntfile
'use strict';
module.exports = function(grunt) {
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
},
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
},
clean: {
build:{
src: [ 'dist/']
}
},
useminPrepare: {
html: 'app/index.html',
options: {
dest: 'dist'
}
},
// Concat
concat: {
options: {
separator: ';'
},
// dist configuration is provided by useminPrepare
dist: {}
},
concat: {
options: {
separator: ';'
},
// dist configuration is provided by useminPrepare
dist: {}
},
// Uglify
uglify: {
// dist configuration is provided by useminPrepare
dist: {}
},
cssmin: {
dist: {}
},
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 20
},
release: {
// filerev:release hashes(md5) all assets (images, js and css )
// in dist directory
files: [{
src: [
'dist/scripts/*.js',
'dist/styles/*.css',
]
}]
}
},
// Usemin
// Replaces all assets with their revved version in html and css files.
// options.assetDirs contains the directories for finding the assets
// according to their relative paths
usemin: {
html: ['dist/html/*.html'],
css: ['dist/styles/*.css'],
options: {
assetsDirs: ['dist', 'dist/styles']
}
},
watch: {
copy: {
files: [ 'app/**', '!app/**/*.css', '!app/**/*.js'],
tasks: [ 'build' ]
},
scripts: {
files: ['app/scripts/app.js'],
tasks:[ 'build']
},
styles: {
files: ['app/styles/app.css'],
tasks:['build']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'app/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
dist: {
options: {
open: true,
base:{
path: 'dist',
options: {
index: 'index.html',
}
}
}
}
},
});
grunt.registerTask('build', [
'clean',
'jshint',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'copy',
'filerev',
'usemin'
]);
grunt.registerTask('serve',['build','connect:dist','watch']);
grunt.registerTask('default',['build']);
};
Below is my folder structure
[enter image description here][2]
I am trying to load the webpage but it's showing plane html without any css.
Can anyone tell me what needs to be done to fix this?
When I am trying to load the file using grunt serve it's showing me 404 error