bower.json, package.json and perfect starter Gruntfile.js (jade(pug), scss/sass, minifiers, ulifiers, cache busting, bower, image optimization, browser live reload, file concatenating)

bower.json

{
  "name": "awesome-app",
  "description": "Web application",
  "main": "index.html",
  "authors": [
    "Bogdan Fedun"
  ],
  "license": "MIT",
  "keywords": [
    "delagics",
    "web",
    "app"
  ],
  "moduleType": [],
  "homepage": "http://delagics.com/",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^2.2.4",
    "font-awesome": "fontawesome#^4.6.3",
    "bootstrap": "~3.3.6"
  }
}

Gruntfile.js

// For performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// If you want to recursively match all sub-folders, use:
// 'test/spec/**/*.js'

'use strict';

module.exports = function (grunt) {

  var autoprefixer = require('autoprefixer')({
      browsers: [
        'Chrome >= 35',
        'Firefox >= 31',
        'Edge >= 12',
        'Explorer >= 9',
        'iOS >= 8',
        'Safari >= 8',
        'Android 2.3',
        'Android >= 4',
        'Opera >= 12'
      ]
    }),
    cssnano = require('cssnano')();

  grunt.initConfig({


    //-----------------------------------------------------------------------------------------------IMPORT-package.json


    pkg: grunt.file.readJSON('package.json'),


    //-----------------------------------------------------------------------------------------------------CONFIG-OBJECT


    config: {
      src: {
        root: 'src',
        fonts: '<%= config.src.root %>/fonts/{,*/}*.{woff,woff2,ttf,eot,svg}',
        html: '<%= config.src.root %>/html',
        images: '<%= config.src.root %>/images/',
        scripts: '<%= config.src.root %>/scripts/{,*/}*.js',
        styles: '<%= config.src.root %>/styles/'
      },
      dist: {
        root: 'dist',
        fonts: '<%= config.dist.root %>/fonts',
        html: '<%= config.dist.root %>/',
        images: '<%= config.dist.root %>/img',
        scripts: '<%= config.dist.root %>/js',
        styles: '<%= config.dist.root %>/css',
        assets: '<%= config.dist.root %>/assets'
      }
    },


    //--------------------------------------------------------------------------------------------------------CLEAN-DIST


    clean: {
      dist: ['<%= config.dist.root %>']
    },


    //---------------------------------------------------------------------------------------------------------SASS/SCSS

    // grunt-contrib-sass (need to be installed)
    /*sass: {
      dist: {
        options: {
          sourcemap: 'none',
          style: 'compact', // nested, compact, compressed, expanded
          quiet: true,
          // loadPath: ['./bower_components/']
        },
        files: [{
          expand: true,
          cwd: '<%= config.src.styles %>',
          src: ['{,*!/}*.{scss,sass}'],
          dest: '<%= config.dist.styles %>',
          ext: '.css'
        }]
      }
    },*/

    // grunt-sass (faster then grunt-contrib-sass)
    sass: {
      dist: {
        options: {
          sourceMap: false,
          outputStyle: 'compact',
          sourceComments: false,
        },
        files: [{
          expand: true,
          cwd: '<%= config.src.styles %>',
          src: ['{,*/}*.{scss,sass}'],
          dest: '<%= config.dist.styles %>',
          ext: '.css'
        }]
      }
    },


    //----------------------------------------------------------------------------------------------------------POST-CSS


    postcss: {
      prefix: {
        map: {inline: false},
        options: {processors: [autoprefixer]},
        src: ['<%= config.dist.styles %>/{,*!/}*.css']
      },
      minimize: {
        options: {processors: [cssnano]},
        files: [{
          expand: true,
          cwd: '<%= config.dist.styles %>',
          src: ['{,*/}*.css'],
          dest: '<%= config.dist.styles %>',
          ext: '.min.css'
        }]
      }
    },


    //----------------------------------------------------------------------------------------------CONCATENATE-JS-FILES


    concat: {
      options: {stripBanners: false/*, separator: ';'*/},
      scripts: {
        src: ['<%= config.src.scripts %>'],
        dest: '<%= config.dist.scripts %>/app.js'
      }
    },


    //---------------------------------------------------------------------------------------------------------UGLIFY-JS


    uglify: {
      options: {sourceMap: true},
      dist: {
        files: [{
          expand: true,
          cwd: '<%= config.dist.scripts %>/',
          src: ['{,*/}*.js', '!{,*/}*.min.js'],
          dest: '<%= config.dist.scripts %>',
          ext: '.min.js'
        }]
      }
    },


    //----------------------------------------------------------------------------------------------------------JADE/PUG


    pug: {
      dist: {
        options: {
          pretty: true,
          data: {debug: false, timestamp: '<%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %>'}
        },
        files: [{
          expand: true,
          cwd: '<%= config.src.html %>',
          dest: '<%= config.dist.html %>',
          src: ['{,*/}*.{pug,jade,htm,html,php}', '!{,*/}/_*.{pug,jade,htm,html,php}'],
          ext: '.html'
        }]
      }
    },


    //-----------------------------------------------------------------------------------------------------CACHE-BUSTING


    cacheBust: {
      dist: {
        options: {
          baseDir: '<%= config.dist.root %>',
          assets: ['**'],
          queryString: true
        },
        files: [{
          expand: true,
          cwd: '<%= config.dist.html %>',
          src: ['index.html'],
          filter: 'isFile'
        }]
      }
    },


    //----------------------------------------------------------------------------------------------------------IMAGEMIN


    imagemin: {
      dist: {
        options: {optimizationLevel: 3, svgoPlugins: [{removeViewBox: false}]},
        files: [{
          expand: true,
          cwd: '<%= config.src.images %>',
          src: ['**/*.{jpg,jpeg,png,gif,svg}'],
          dest: '<%= config.dist.images %>'
        }]
      }
    },


    //---------------------------------------------------------------------------------------------------------MODERNIZR


    modernizr: {
      dist: {
        crawl: false,
        customTests: [],
        // Avoid unnecessary builds
        cache: true,
        // Path to the build you're using for development.
        devFile: false,
        dest: '<%= config.dist.scripts %>/modernizr.js',
        options: [
          'domPrefixes',
          'prefixes',
          'prefixed',
          'testAllProps',
          'testProp',
          'testStyles',
          'html5shiv',
          'setClasses'
        ],
        uglify: true,
        tests: [
          'cssanimations', 'csstransitions',

          /*'applicationcache', 'audio', 'canvas', 'canvastext', 'geolocation', 'hashchange', 'history', 'indexeddb',
          'svg', 'touchevents', 'video', 'webgl', 'websockets', 'cssanimations', 'backgroundsize', 'bgsizecover',
          'boxshadow', 'csscolumns', 'ellipsis', 'cssfilters', 'flexbox', 'flexboxlegacy', 'flexboxtweener', 'flexwrap',
          'fontface', 'generatedcontent', 'cssgradients', 'hsla', 'multiplebgs', 'opacity', 'cssreflections',
          'cssremunit', 'rgba', 'textshadow', 'csstransforms', 'csstransforms3d', 'csstransitions', 'localstorage',
          'sessionstorage', 'websqldatabase', 'svgclippaths', 'svgfilters', 'inlinesvg', 'videoautoplay', 'webworkers'*/
        ]
      }
    },


    //-------------------------------------------------------------------------------------------COPY-BOWER-DEPENDENCIES


    bowercopy: {
      options: {
        srcPrefix: 'bower_components',
        destPrefix: '<%= config.dist.assets %>'
      },
      dist: {
        files: [
          {'jquery': 'jquery/dist'},
          {'bootstrap': 'bootstrap/dist'},
          {'font-awesome/css': 'font-awesome/css'},
          {'font-awesome/fonts': 'font-awesome/fonts'}
        ]
      },
    },


    //-------------------------------------------------------------------------------------------------------------WATCH


    watch: {
      css: {
        files: '<%= config.src.styles %>/**/*.{scss,sass}',
        tasks: ['sass', 'postcss'],
        options: {
          spawn: false,
        },
      },
      js: {
        files: '<%= config.src.scripts %>',
        tasks: ['concat', 'uglify'],
        options: {
          spawn: false,
        },
      },
      html: {
        files: '<%= config.src.html %>/**/*.{pug,jade,htm,html,php}',
        tasks: ['pug'],
        options: {
          spawn: false,
        },
      },
      images: {
        files: '<%= config.src.images %>/**/*.{jpg,jpeg,png,gif,svg}',
        tasks: ['imagemin'],
        options: {
          spawn: false,
        },
      }
    },


    //------------------------------------------------------------------------------------------------------BROWSER-SYNC


    browserSync: {
      dist: {
        bsFiles: {
          src: [
            '<%= config.dist.root %>/{,*/}*.html',
            '<%= config.dist.styles %>/{,*/}*.css',
            '<%= config.dist.scripts %>/{,*/}*.js',
          ]
        },
        options: {
          server: {
            baseDir: '<%= config.dist.root %>',
            index: 'index.html',
            // directory: true
          },
          // proxy: "example.dev",
          watchTask: true,
          port: 9000,
          logPrefix: 'Delagics',
          // Stop auto-opening the browser
          open: false,
          browser: ['google chrome'],
          ui: false,
          notify: true,
          reloadOnRestart: true
        }
      }
    }
  });


  //------------------------------------------------------------------------------------------------------LOAD-NPM-TASKS


  // load npm tasks, these plugins provide necessary tasks.
  require('load-grunt-tasks')(grunt, {
    scope: 'devDependencies',
    pattern: ['grunt-*']
  });


  //------------------------------------------------------------------------------------------------------REGISTER-TASKS


  // Default task
  grunt.registerTask('default', [
    'clean', 'bowercopy', 'sass', 'postcss', 'concat', 'uglify', 'modernizr', 'pug', 'imagemin', 'cacheBust', 'browserSync', 'watch'
  ]);


};

package.json

{
  "name": "awesome-app",
  "version": "1.0.0",
  "description": "Web application",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gist.github.com/insane-dev/cc03f93898332d0e559fedc3008f98a1"
  },
  "keywords": [
    "delagics",
    "web",
    "app"
  ],
  "author": "Bogdan Fedun",
  "license": "MIT",
  "homepage": "https://delagics.com",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "cssnano": "^3.6.2",
    "grunt": "^1.0.1",
    "grunt-bowercopy": "^1.2.4",
    "grunt-browser-sync": "^2.2.0",
    "grunt-cache-bust": "^1.3.0",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-imagemin": "^1.0.1",
    "grunt-contrib-pug": "^1.0.0",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-modernizr": "^1.0.2",
    "grunt-postcss": "^0.8.0",
    "grunt-sass": "^1.2.0",
    "load-grunt-tasks": "^3.5.0"
  }
}