javascript - How to successfully 'grunt build' a yeoman project -

i used yeoman scaffold angular webapp. created webapp runs fine!

i trying put in production. register task build, unfortunately, haven't manage find appropriate resources explain in detail how done.

so far manage after running grunt build have webapp included , minified css , html files can't scripts included.

question: what's role of build block in index.html file? index.html file of yeoman generator comes vendor.js etc. keep ?

i appreciate if sum steps must taken in order build yeoman app.

in case posting gruntfile , index.html, gruntfile:

    'use strict';     module.exports = function (grunt) {  // load grunt tasks automatically require('load-grunt-tasks')(grunt);   // time how long tasks take. can when optimizing build times  require('time-grunt')(grunt);  // configurable paths application var appconfig = { app: require('./bower.json').apppath || 'app', dist: 'dist' };  // define configuration tasks grunt.initconfig({  // project settings yeoman: appconfig,  // watches files changes , runs tasks based on changed files watch: {   bower: {     files: ['bower.json'],     tasks: ['wiredep']   },   js: {     files: ['<%= yeoman.app %>/**/*.js'],     tasks: ['newer:jshint:all'],     options: {       livereload: '<%= connect.options.livereload %>'     }   },   jstest: {     files: ['test/spec/{,*/}*.js'],     tasks: ['newer:jshint:test', 'karma']   },   compass: {     files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],     tasks: ['compass:server', 'autoprefixer']   },   gruntfile: {     files: ['gruntfile.js']   },   livereload: {     options: {       livereload: '<%= connect.options.livereload %>'     },     files: [       '<%= yeoman.app %>/**/*.html',       '.tmp/styles/{,*/}*.css',       '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'     ]   } },  // actual grunt server settings connect: {   options: {     port: 9000,     // change '0.0.0.0' access server outside.     hostname: 'localhost',     livereload: 35729   },     proxies: [{     context: '/gemsbok-web/rest/api', // context of data service     host: 'localhost', // wherever data service running     port: 8080, // port data service running on   }],   livereload: {     options: {       open: true,       middleware: function (connect) { // setup proxy var middlewares = [require('grunt-connect-proxy/lib/utils').proxyrequest];  middlewares.push(connect.static('.tmp'));  middlewares.push(connect().use(  '/bower_components',  connect.static('./bower_components') )); middlewares.push(connect.static(appconfig.app));  return middlewares; }      }    },       test: {     options: {       port: 9001,       middleware: function (connect) {         return [           connect.static('.tmp'),           connect.static('test'),           connect().use(             '/bower_components',             connect.static('./bower_components')           ),           connect.static(appconfig.app)         ];       }     }   },   dist: {     options: {       open: true,       base: '<%= yeoman.dist %>'     }   } },  // make sure code styles par , there no obvious mistakes jshint: {   options: {     jshintrc: '.jshintrc',     reporter: require('jshint-stylish')   },   all: {     src: [       'gruntfile.js',       '<%= yeoman.app %>/scripts/{,*/}*.js'     ]   },   test: {     options: {       jshintrc: 'test/.jshintrc'     },     src: ['test/spec/{,*/}*.js']   } },  // empties folders start fresh clean: {   dist: {     files: [{       dot: true,       src: [         '.tmp',         '<%= yeoman.dist %>',         '!<%= yeoman.dist %>/.git*'       ]     }]   },   server: '.tmp' },  // add vendor prefixed styles autoprefixer: {   options: {     browsers: ['last 1 version']   },   dist: {     files: [{       expand: true,       cwd: '.tmp/styles/',       src: '{,*/}*.css',       dest: '.tmp/styles/'     }]   } },  // automatically inject bower components app wiredep: {   options: {    // cwd: '<%= yeoman.app %>'   },   app: {     src: ['<%= yeoman.app %>/index.html'],     ignorepath:  /\.\.\//   },   sass: {     src: ['<%= yeoman.app %>/common/styles/{,*/}*.{scss,sass}'],     ignorepath: /(\.\.\/){1,2}bower_components\//   } },  // compiles sass css , generates necessary files if requested compass: {   options: {     sassdir: '<%= yeoman.app %>/styles',     cssdir: '.tmp/styles',     generatedimagesdir: '.tmp/images/generated',     imagesdir: '<%= yeoman.app %>/common/images',     javascriptsdir: '<%= yeoman.app %>/common', //guessed     fontsdir: '<%= yeoman.app %>/styles/fonts',     importpath: './bower_components',     httpimagespath: '/images',     httpgeneratedimagespath: '/images/generated',     httpfontspath: '/styles/fonts',     httppath: '../',     relativeassets: false,     assetcachebuster: false,     raw: 'sass::script::number.precision = 10\n' //,   },   dist: {     options: {       generatedimagesdir: '<%= yeoman.dist %>/images/generated'     }   },   server: {     options: {       debuginfo: true     }   } },  // renames files browser caching purposes filerev: {   dist: {     src: [       '<%= yeoman.dist %>/scripts/{,*/}*.js',       '<%= yeoman.dist %>/styles/{,*/}*.css',       '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',       '<%= yeoman.dist %>/styles/fonts/*'     ]   } },  // reads html usemin blocks enable smart builds automatically // concat, minify , revision files. creates configurations in memory // additional tasks can operate on them useminprepare: {   html: '<%= yeoman.app %>/index.html',   options: {     dest: '<%= yeoman.dist %>'   } },  // performs rewrites based on filerev , useminprepare configuration usemin: {   html: ['<%= yeoman.dist %>/{,*/}*.html'],   css: ['<%= yeoman.dist %>/common/styles/{,*/}*.css'],   options: {     assetsdirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']   } },  // following *-min tasks produce minified files in dist folder // default, `index.html`'s <!-- usemin block --> take care of // minification. these next options pre-configured if not wish // use usemin blocks. // cssmin: { //   dist: { //     files: { //       '<%= yeoman.dist %>/styles/main.css': [ //         '.tmp/styles/{,*/}*.css' //       ] //     } //   } // }, // uglify: { //   dist: { //     files: { //       '<%= yeoman.dist %>/scripts/scripts.js': [ //         '<%= yeoman.dist %>/scripts/scripts.js' //       ] //     } //   } // }, // concat: { //   dist: {} // },  imagemin: {   dist: {     files: [{       expand: true,       cwd: '<%= yeoman.app %>/images',       src: '{,*/}*.{png,jpg,jpeg,gif}',       dest: '<%= yeoman.dist %>/images'     }]   } },  svgmin: {   dist: {     files: [{       expand: true,       cwd: '<%= yeoman.app %>/images',       src: '{,*/}*.svg',       dest: '<%= yeoman.dist %>/images'     }]   } },  htmlmin: {   dist: {     options: {       collapsewhitespace: true,       conservativecollapse: true,       collapsebooleanattributes: true,       removecommentsfromcdata: true,       removeoptionaltags: true     },     files: [{       expand: true,       cwd: '<%= yeoman.dist %>',       src: ['*.html', 'views/{,*/}*.html'],       dest: '<%= yeoman.dist %>'     }]   } },  // ngmin tries make code safe minification automatically // using angular long form dependency injection. doesn't work on // things resolve or inject have done manually. ngmin: {   dist: {     files: [{       expand: true,       cwd: '.tmp/concat/scripts',       src: '*.js',       dest: '.tmp/concat/scripts'     }]   } },  // replace google cdn references cdnify: {   dist: {     html: ['<%= yeoman.dist %>/*.html']   } },  // copies remaining files places other tasks can use copy: {   dist: {     files: [{       expand: true,       dot: true,       cwd: '<%= yeoman.app %>',       dest: '<%= yeoman.dist %>',       src: [         '*.{ico,png,txt}',         '.htaccess',         '*.html',         'views/{,*/}*.html',         'images/{,*/}*.{webp}',         'fonts/*',         'bower_components/**/*'       ]     }, {       expand: true,       cwd: '.tmp/images',       dest: '<%= yeoman.dist %>/images',       src: ['generated/*']     }]   },   styles: {     expand: true,     cwd: '<%= yeoman.app %>/styles',     dest: '.tmp/styles/',     src: '{,*/}*.css'   } },  // run tasks in parallel speed build process concurrent: {   server: [     'compass:server'   ],   test: [     'compass'   ],   dist: [     'compass:dist',     'imagemin',     'svgmin'   ] },  // test settings karma: {   unit: {     configfile: 'test/karma.conf.js',     singlerun: true   } } });   grunt.registertask('serve', 'compile start connect web server', function (target) { if (target === 'dist') {   return grunt.task.run(['build', 'connect:dist:keepalive']); }  grunt.task.run([   'clean:server',   'wiredep',   'concurrent:server',   'autoprefixer',   'configureproxies:server',   'connect:livereload',   'watch' ]); });  grunt.registertask('server', 'deprecated task. use "serve" task instead', function (target) { grunt.log.warn('the `server` task has been deprecated. use `grunt serve` start server.'); grunt.task.run(['serve:' + target]); });  grunt.registertask('test', [ 'clean:server', 'concurrent:test', 'autoprefixer', 'connect:test', 'karma'  ]);  grunt.registertask('build', [ 'clean:dist', 'wiredep', 'useminprepare', 'concurrent:dist', 'autoprefixer', 'concat', 'ngmin', 'copy:dist', 'cdnify', 'cssmin', 'uglify', 'filerev', 'usemin', 'htmlmin'  ]);   grunt.registertask('default', [ 'newer:jshint', 'test', 'build'  ]); }; 

this index.html in app:

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- place favicon.ico , apple-touch-icon.png in root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css" /> <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="../bower_components/nvd3/src/nv.d3.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> </head> <body ng-app="antelopeapp" ng-controller="navigationctrl"> <!--[if lt ie 7]>   <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]-->  <!-- add site or application content here --> <div class="container">   <div class="header">     <ul class="nav nav-pills pull-right">       <li class="active"><a ng-href="#">home</a></li>       <li><a ng-href="#/about">about</a></li>       <li><a ng-href="#">contact</a></li>     </ul>     <h3 class="text-muted">antelope</h3>   </div>    <div ng-view="" >   </div>    <div class="footer">     <p><span class="glyphicon glyphicon-copyright-mark"></span> codean ltd 2008 - 2014. rights reserved.</p>   </div> </div>  <!-- build:js(.) scripts/oldieshim.js --> <!--[if lt ie 9]> <script src="../bower_components/es5-shim/es5-shim.js"></script> <script src="../bower_components/json3/lib/json3.min.js"></script> <![endif]--> <!-- endbuild -->  <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/json3/lib/json3.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script> <script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script> <script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script> <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="../bower_components/angular-dashboard-framework/dist/angular-dashboard-framework.min.js"></script> <script src="../bower_components/d3/d3.js"></script> <script src="../bower_components/nvd3/nv.d3.js"></script> <script src="../bower_components/angular-nvd3/dist/angular-nvd3.min.js"></script> <script src="../bower_components/angular-local-storage/angular-local-storage.js"></script> <script src="../bower_components/angular-resource/angular-resource.js"></script> <script src="../bower_components/angular-cookies/angular-cookies.js"></script> <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="../bower_components/angular-animate/angular-animate.js"></script> <script src="../bower_components/angular-touch/angular-touch.js"></script> <script src="../bower_components/angular-route/angular-route.js"></script> <!-- endbower --> <!-- endbuild -->  <!-- build:js js/sample.min.js --> <!-- angular-bootstrap --> <script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script> <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <!-- endbuild -->      <!-- build:js({.tmp,app}) scripts/scripts.js -->     <script src="app.js"></script>     <script src="pages/main/main.js"></script>     <script src="pages/about/about.js"></script>     <script src="directives/bluebox.js"></script>      <script src="pages/dashboard/provider.js"></script>     <script src="pages/dashboard/sortable.js"></script>     <script src="pages/dashboard/widget-content.js"></script>     <script src="pages/dashboard/widget.js"></script>     <script src="pages/dashboard/dashboard.js"></script>     <script src="pages/dashboard/sample.js"></script>     <script src="pages/dashboard/samplemodel.js"></script>     <script src="pages/dashboard/structures.js"></script>     <!-- endbuild -->        <script src="pages/dashboard/nvd3chart.js"></script> 

i've been working meanjs , way i've done follows:

1) under dev_server/myappfolder ->

* npm install grunt-cli && npm install grunt  * export node_env=development && npm install // depend on prod or dev builds assuming have multiple configuration ports i.e. 3000/dev, 8000/prod * grunt build 

so have /dist folder can use run app

2) copy prod_server/myappfolder

you can githook, post-receive, rsync, etc. once there can

* npm install grunt-cli && npm install grunt  //you can -g grunt if needed * export node_env=production && npm install --production // notice production option * node myserverfile.js 

finally can create upstart script //assuming in linux env initiate app service. there lot of things/conf can regarding question think give hint of