I have a firebase-hosted app that is working, and now I'm trying to integrate Semantic-UI so that when I deploy it to firebase it will have all the Semantic icons and styles. The icons and styles are not making it over somehow, and they show up just fine on my local "grunt serve."
I have semantic.js referenced and integrated into vendor.js, and I have semantic.css referenced in the header and integrated into the vendor.css during the build. It seems I'm overthinking how to get my icons and styles up on firebase. Thoughts?
My dist folder for my grunt build is in [root folder]/dist and the dist folder for Semantic-UI is in [root folder]/bower_components/semantic-ui/dist.
index.html
<!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 and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/semantic-ui/dist/semantic.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="devNews">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ng-include="'views/nav.html'"></div>
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!--[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]-->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.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>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/mockfirebase/dist/mockfirebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.min.js"></script>
<script src="bower_components/semantic-ui/dist/semantic.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/services/post.js"></script>
<script src="scripts/services/authorization.js"></script>
<script src="scripts/services/profile.js"></script>
<script src="scripts/controllers/profile.js"></script>
<script src="scripts/controllers/postview.js"></script>
<script src="scripts/controllers/nav.js"></script>
<script src="scripts/controllers/authorization.js"></script>
<script src="scripts/filters/url.js"></script>
<!-- endbuild -->
</body>
</html>
I had to first add the following to my Gruntfile.js. Since I'm not using Bootstrap any longer, I just replaced it with some Semantic-UI directory settings:
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: 'bower_components/semantic-ui/dist',
src: 'themes/**/*',
dest: '<%= yeoman.dist %>'
}, {
expand: true,
cwd: 'bower_components/semantic-ui/dist',
src: 'components/*',
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
Then I had to reference the CDN for my icons, adding them to my semantic.css.
#font-face {
font-family: 'Icons';
src: url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.eot");
}
etc. for each icon type.
Related
So I have successfully setup my gulpfile.js to handle copying files to a 'dist' folder to then move over to my windows server, but am curious on how I can deal with file pathing? So my gulp looks like:
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var filter = require('gulp-filter');
var mainBowerFiles = require('main-bower-files');
// var imagemin = require('gulp-imagemin');
// var pngquant = require('imagemin-pngquant');
var bases = {
app: 'app/',
dist: 'dist/',
};
var paths = {
scripts: ['ppt/scripts/**/*.js'],
styles: ['ppt/styles/**/*.css'],
html: ['ppt/views/**/*.html'],
assets: ['ppt/assets/**/*.png', 'ppt/assets/**/*.svg'],
extras: ['index.html', '404.html', 'robots.txt', 'favicon.ico'],
};
var gulp = require('gulp'),
mainBowerFiles = require('main-bower-files');
gulp.task('bower', function() {
// mainBowerFiles is used as a src for the task,
// usually you pipe stuff through a task
return gulp.src(mainBowerFiles())
// Then pipe it to wanted directory, I use
// dist/lib but it could be anything really
.pipe(gulp.dest('dist/lib'))
});
// Delete the dist directory
gulp.task('clean', function() {
return gulp.src(bases.dist).pipe(clean());
});
// Process scripts and concatenate them into one output file
gulp.task('scripts', ['clean'], function() {
gulp.src(paths.scripts, {
cwd: bases.app
}).pipe(uglify()).pipe(concat('app.min.js')).pipe(gulp.dest(bases.dist + 'scripts/'));
});
// Imagemin images and ouput them in dist
// gulp.task('imagemin', ['clean'], function() {
// gulp.src(paths.images, {
// cwd: bases.app
// }).pipe(imagemin()).pipe(gulp.dest(bases.dist + 'assets/'));
// });
// Copy all other files to dist directly
gulp.task('copy', ['clean'], function() {
// Copy html
gulp.src(paths.html, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'views'));
// Copy styles
gulp.src(paths.styles, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'styles'));
//Copy assets
gulp.src(paths.assets, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'assets'));
// Copy app scripts
gulp.src(paths.scripts, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'scripts'));
// Copy extra html5bp files
gulp.src(paths.extras, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist));
});
// A development task to run anytime a file changes
gulp.task('watch', function() {
gulp.watch('app/**/*', ['scripts', 'copy']);
});
// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'scripts', 'copy']);
In using angular mvc, my index.html which sets my pathing for scripts, 3rd party components, etc... looks like (not complete file, just lines that are applicable):
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/angular-loading-bar/build/loading-bar.css" rel="stylesheet" />
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.material.min.css" rel="stylesheet" />
<link href="ppt/styles/main.css" rel="stylesheet" />
<!-- 3rd party libraries managed by Bower -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/angular-moment/angular-moment.js"></script>
<script src="../bower_components/kendo-ui/js/kendo.all.min.js"></script>
<script src="../bower_components/ng-file-upload-shim/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="../bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="../bower_components/checklist-model/checklist-model.js"></script>
<script src="../bower_components/angular-validation-match/dist/angular-validation-match.js"></script>
<!-- Load app main script -->
<script src="ppt/scripts/app.js"></script>
<!-- Load services -->
<script src="ppt/scripts/services/authInterceptorService.js"></script>
<script src="ppt/scripts/services/authService.js"></script>
<script src="ppt/scripts/services/pptService.js"></script>
<script src="ppt/scripts/services/claimsService.js"></script>
<script src="ppt/scripts/services/swipesService.js"></script>
<script src="ppt/scripts/services/recurService.js"></script>
<script src="ppt/scripts/services/tokensManagerService.js"></script>
<script src="ppt/scripts/services/docsService.js"></script>
<script src="ppt/scripts/services/ordersService.js"></script>
<script src="ppt/scripts/services/errorService.js"></script>
<script src="ppt/scripts/services/utilsService.js"></script>
<script src="ppt/scripts/services/cardsService.js"></script>
<script src="ppt/scripts/services/mobileAppService.js"></script>
<!-- Load controllers -->
<script src="ppt/scripts/controllers/indexController.js"></script>
<script src="ppt/scripts/controllers/infoController.js"></script>
<script src="ppt/scripts/controllers/homeController.js"></script>
<script src="ppt/scripts/controllers/pptController.js"></script>
<script src="ppt/scripts/controllers/pptProfileController.js"></script>
<script src="ppt/scripts/controllers/logreg/loginController.js"></script>
<script src="ppt/scripts/controllers/logreg/signupController.js"></script>
<script src="ppt/scripts/controllers/logreg/forgotController.js"></script>
<script src="ppt/scripts/controllers/claims/claimsController.js"></script>
<script src="ppt/scripts/controllers/claims/swipeController.js"></script>
<script src="ppt/scripts/controllers/claims/recurController.js"></script>
<script src="ppt/scripts/controllers/docs/docsController.js"></script>
<script src="ppt/scripts/controllers/orders/ordersController.js"></script>
<script src="ppt/scripts/controllers/orders/orderController.js"></script>
<script src="ppt/scripts/controllers/refreshController.js"></script>
<script src="ppt/scripts/controllers/tokensManagerController.js"></script>
<script src="ppt/scripts/controllers/associateController.js"></script>
<script src="ppt/scripts/controllers/cards/cardsController.js"></script>
<script src="ppt/scripts/controllers/mobileapp/mobileAppController.js"></script>
<!-- Load custom filters -->
<!-- Load custom directives -->
This shown and said, what is the best way to understand setting the pathing so it works when in the 'dest' folder'? I try to keep some things relative. Thoughts on this?
Thanks much.
I know it is simply a matter of adding 'dist', but I am wanting gulp to handle that as a task.
Change all the ../bower_components and ppt to be dist.
I used yeoman to start an angular projects.
I used bower to install some angular components.
In my index.html I have this peace of code
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!--should be the last to override-->
<link rel="stylesheet" href="styles/custom2.css">
<link rel="stylesheet" href="styles/diverse.css">
</head>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/hello/dist/hello.all.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
after I run
grunt serve:dist
the index.html get compiled and here is the result.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>indexPage</title>
<meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!--to auto host later-->
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"> <!--should be the last to override-->
<link rel="stylesheet" href="styles/custom2.css">
<link rel="stylesheet" href="styles/diverse.css"> </head>
<script src="scripts/vendor.3bff2419.js"></script> <script src="scripts/scripts.c4d1c5ee.js"></script> <body ng-app="frontApp" ng-class="body_style"> <!--<div ng-show="mainNavBar_show" ng-include src="mainNavBar"></div>--> <div ng-view></div> </body> </html>
All the files that are shown as link rel="..."
are throwing 404 error. ( not the case for the files that are succeffully compiled)
here is screenshot from the error code.
How can i make grunt add this files.
I used the defaukt grunt.js shipped with yeoman.
Seems like your HTML has been rewritten to point the DIST folder which is something that "makes sense", a solution could be to make a copy of your bower components to your DIST folder or change the rewriting html rules in your grunt tasks.
I use a copy grunt task like this one
copy: {
main: {
files: [
{ src: ['**/**.min.css'], dest: 'dist/' },
{ src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/' },
{ src: ['bower_components/Chart.js/Chart.min.**'], dest: 'dist/' },
{ src: ['bower_components/jquery/jquery.min.**'], dest: 'dist/' },
{ src: ['bower_components/angular/angular.min.**'], dest: 'dist/' },
{ src: ['bower_components/angular-i18n/angular-locale_es-419.min.**'], dest: 'dist/' },
//... and so on...
]
}
}
Currently I writing a Grunt Build file ; which uses "usemin" I have created 3 Blocks in HTML which would create 3 files assets.min.js , lib.min.js etc..
<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-touch.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.min.js"></script>
<!-- endbuild -->
This works fine. But There are 2 major problems I am facing with it...
Angular shows error "Uncaught error [$injector:modulerr]..
It seems Usemin is also miniifying the files again.
I also tried 2nd option, by just concatinating these files i.e bypassing minification step avoiding Usemin.. still the same error
Please guide
Angular uses something called dependency injection to resolve your arguments. Angular knows what each object is by its name.
"$scope" will be initialised as a scope object because it is named "$scope". After usemin, this variable will be called something else, like "a", to save bytes. Angular doesn't know what "a" is and throws an error.
You can solve this like so:
Read here about the minification of angular apps
http://docs.angularjs.org/tutorial/step_05
Either follow the guide manually or use ngmin process BEFORE you run uglify.
Hope this helps!
You can solve this by 2 ways.
1. use unminified files in usemin block
<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-route.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-animate.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-touch.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.js"></script>
<!-- endbuild -->
2. Copy scripts using grunt task
copy:{
scripts:{
files:[{
expand: true,
cwd:'<%= config.app %>',
dest: '<%= config.tmp %>', src: ['app/assets/js/lib/**/*.min.js']
}]
},
}
I installed yo webapp without bootstrap then added bootstrap 3 following this answer: https://stackoverflow.com/a/19034513/712005.
I can't get grunt to build my main.css and include bootstrap correctly. No style folder is created in the dist folder.
When running "grunt build" I get this message:
Running "cssmin:generated" (cssmin)
task Destination not written because minified CSS was empty.
but no errors.
My gruntfile includes this:
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: '<%= yeoman.app %>/index.html'
},
usemin: {
options: {
assetsDirs: ['<%= yeoman.dist %>']
},
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
}
and this:
grunt.loadNpmTasks('grunt-bower-install');
index.html includes:
<!-- build:css(.tmp,app) styles/main.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp,app) styles/bootstrap.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
References I included to the location of main.css and bootstrap.css in the app-folder were removed during build.
bower.json includes:
{
"name": "gabriel",
"version": "0.0.1",
"dependencies": {
"bootstrap": "~3.0.2",
"jquery": "~2.0.3",
"modernizr": "~2.7.0"
},
"devDependencies": {}
}
What am I missing?
As stated in the link follow the same steps. That should work for you. I just did and works fine for me.
In summary.
yo angular - Say 'No' to Bootstrap here
bower install --save bootstrap
npm install --save-dev grunt-bower-install
edit Gruntfile.js - Do as what exactly says
edit app/index.html - Add only below lines
<!-- bower:css -->
<!-- endbower -->
<!-- bower:js -->
<!-- endbower -->
grunt bower-install
run grunt server or grunt build
The reason why the following error is showing is that
Running "cssmin:generated" (cssmin) task >> Destination not written because minified CSS was empty.
the place where bootstrap css file should be placed might be missplaced, so the correct position to place bootstrap css file is as follow -
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
I hope this would help, folks...
My index.html has:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/public/stylesheets/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="WebApp">
<base href="/app">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[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]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) /app/scripts/scripts.js -->
<script src="/app/scripts/app.js"></script>
<script src="/app/scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
All of my angular code is in a app directory from the top level. My Gruntfile.coffee is:
useminPrepare:
html: "<%= appConfig.app %>/index.html"
options:
dest: "<%= appConfig.dist %>"
usemin:
html: "<%= appConfig.dist %>/*.html"
css: ["<%= appConfig.dist %>/styles/**/*.css"]
options:
dirs: ["<%= appConfig.dist %>"]
But I'm getting an error:
Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Warning: An error occurred while processing a template (Cannot read property 'src' of undefined). Use --force to continue.
What am I doing wrong?
I think your problem is, that you want to concat/minify the angular sources. The documented way is to use the provided files like angular-route.min.js and include them in the head section of your html.
So, following lines throws that error:
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
As a side note: these angular libs heave heavy complex sourcecode in some parts, its quite a challenge to exactly configure your personal minifier, like the angular developers did with theirs, to provide the public angular-xxxxx.min.js files.
If I understand correctly, your index.html file is in the app directory, so you may try to use relative links to scripts in your html.
<!-- build:js scripts/angular.js -->
<script src="bower_components/angular-route/angular-route.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>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->