I have a react component and i want to render it in a razor page. But i don't want to be rendered in a div. Cause i know it's works with ReactDOM.render. But it's not what i want.
I must use it as a tag in a razor page, so if i have the class App i will use it as .
But, when i try to load it doesn't show anything but inspector's console of the page doesn'y throw any error. So, do i miss something to import or a function to be needed? The project is a ASP.NET CORE MCV and my purpose is to integrate React in a Razor page,and the request is exactly use the class as tag. I tried to use pure JS file but with the same result.
App.jsx
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: 'Hello, World! aa' };
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
);
}
}
Index.cshtml
#using Newtonsoft.Json;
#using SportData.Web.Models;
#using System.Web.Optimization;
#using Microsoft.AspNetCore.NodeServices
#model SportContainer
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="#Url.Content("~/js/App.jsx")" type="module"></script>
<App></App>
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SportData</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script>var exports = {};</script>
<link rel="stylesheet" href="~/css/card.css" asp-append-version="true" />
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
package.json
{
"devDependencies": {
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"scripts": {
"build": "babel SportData.Web/wwwroot/js --out-dir SportData.Web/wwwroot/js/build --presets #babel/preset-react"
},
"type":"module"
}
You might find it useful to read up on https://reactjs.net/
You might not necessarily need to use that package, but maybe there's something you can learn from how it works, given it's open source https://github.com/reactjs/React.NET
Related
I have had lots of problems importing bootstrap using the npm modules.
I even tried updating my angular to v 15 to try fix the issue.
If I do not either include the assets manually or use an external CDN, the bootstrap routing and other functions stop working. Even explicitly including the ../node_modules/ ... files doesn't work. I tried following the different steps here: https://www.techiediaries.com/angular-bootstrap/ without success either.
package.json
"#popperjs/core": "^2.11.6",
"bootstrap": "^4.6.2",
"jquery": "^3.6.0"
angular.json
...
"projects": {
"my-project": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"assets": [
"src/images",
"src/js",
"src/css",
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.css",
"./node_modules/cookieconsent/build/cookieconsent.min.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/cookieconsent/build/cookieconsent.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body">
<div class="container">
<div>
<app-root></app-root>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- <script src="../../../../assets/js/popper.min.js"></script> -->
<script src="../../../../assets/js/bootstrap.min.js"></script>
<!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
</body>
</html>
I want to create a simple vueapp.
I ran
vue create test
I cd'ed into test
and run npm run serve
on localhost:8080
I get the following the browser
<html><body><h1>It works!</h1></body></html>
curl gives me
$ curl localhost:8080
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>test</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
have
$ vue --version
#vue/cli 4.5.9
Which setting might be wrong. I checked my ~/.profile file which includes
PATH="$HOME/.node_modules/bin:$PATH"
export npm_config_prefix=~/.node_modules
I checked the src directory but I there is no html file with it works. What does
We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.
mean
package.json
----------------
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I’m having problems with browserify. In short, my onclick function is not being called with my bundle.js but it will fire if I include my main.js as a script tag in index.html. I have saved and run
browserify main.js > bundle.js
in the terminal with no results. Even stranger, when I throw an alert function in my main.js and run browserify again the alert if successfully called from bundle.js
Interestingly, my require() function is working fine in the browser so bundle.js is doing something. My code is below
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><a id="toolsPage" onclick="ToolsPage(this)"href="#">Tools</a></li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="bundle.js"></script>
</body>
</html>
main.js
var EthUtil = require("ethereumjs-util");
alert("yo1");
var hexToBytes = function(hex) {
for (var bytes = [], c = 0; c < hex.length; c+=2)
bytes.push(parseInt(hex.substr(c, 2), 16));
return bytes;
}
var privateKeyToAddress = function(privateKey) {
return `0x${EthUtil.privateToAddress(hexToBytes(privateKey)).toString('hex')}`
}
alert(privateKeyToAddress("ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"));
function ToolsPage (id) {
alert("tools");
}
package.json
{
"name": "new",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"babel-core": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.0",
"ethereumjs-util": "^5.1.4",
"jquery": "^3.3.1",
"web3": "^1.0.0-beta.30"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
The ToolsPage function is not being called. What about browserify is disabling this function?
I'm currently getting this error trying to load my Angular App:
Uncaught Error: [$injector:unpr] Unknown provider: $$HashMapProvider
<- $$HashMap <- $$animateQueue <- $animate <- $compile <-
$$animateQueue
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24%24HashMapProvider%2…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
The link in the error just tells me I spelled something wrong, but after quadruple checking, that's not the issue here. Here is my bower.json file:
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.6.4",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-animate": "^1.6.4",
"angular-material": "^1.1.4"
}
}
Here's my angular.module that's the same in both my view1.js and view2.js
(function() {
var module = angular.module("myApp.view2", [
"ngRoute",
"ngMaterial",
"ngAnimate",
"ngAria",
"ngMessages",
"mdPickers"
]);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view2', {
templateUrl: 'view2/view2.html',
controller: 'View2Ctrl'
});
}]);
module.controller("View2Ctrl", ['$scope', '$mdpDatePicker', '$mdpTimePicker', function($scope, $mdpDatePicker, $mdpTimePicker){
$scope.currentDate = new Date();
// controller code
}]);
})();
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[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]-->
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: <span app-version></span></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script><script src="app.js"></script>
<script src="https://cdn.rawgit.com/alenaksu/mdPickers/0.7.4/dist/mdPickers.min.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
I also have a package.json for my node dependencies. That doesn't seem to be part of this particular issue, but I can add in that code if requested.
I've seen and asked this question asked before, but none of the offered solutions helped, so I'm asking on my own now.
Here is the github. The version throwing me errors is currently on the Master Branch. https://github.com/eanzalone/AngularDatePicker
Make sure you are using appropriate versions
Update your bower.json to use 1.5.0 version of angular
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.5.0",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-animate": "^1.5.0",
"angular-material": "^1.1.4"
}
}
add the scripts from the bower components itself
I have this yeoman generated GruntFile.js. When I run "grunt" the dist folder does not change all my scripts from bower_components/*.js, only some of them.
Here is a sample of index.html from dist folder
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.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="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-messages.min.js"></script>
<script src="bower_components/angular-utf8-base64/angular-utf8-base64.js"></script>
<script src="bower_components/ng-table/ng-table.js"></script>
<script src="bower_components/lodash/dist/lodash.js"></script>
<script src="bower_components/angular-growl-v2/build/angular-growl.js"></script>
<script src="bower_components/nya-bootstrap-select/dist/js/nya-bs-select.js"></script>
As you can see it doesn't find the correct js file to use. How can I fix this?
The same issue is with my css files
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/ng-table/ng-table.css">
<link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
<link rel="stylesheet" href="bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css">
Thanks!
If you spot any other mistakes or improvements in my GruntFile.js please let me know
EDIT
Here is my bower.json file
{
"name": "civilization-web",
"version": "0.0.0",
"dependencies": {
"angular": "~1.3.7",
"json3": "~3.3.1",
"es5-shim": "~3.1.0",
"bootstrap": "~3.3.1",
"angular-resource": "~1.3.7",
"angular-sanitize": "~1.3.7",
"angular-animate": "~1.3.7",
"angular-touch": "~1.3.7",
"angular-route": "~1.3.7",
"angular-utf8-base64": "~0.0.5",
"angular-messages": "~1.3.8",
"ng-table": "~0.3.3",
"angular-bootstrap": "~0.12.0",
"ng-file-upload": "~2.0.5",
"ng-file-upload-shim": "~2.0.5",
"lodash": "2.4.1",
"angular-growl-v2": "~0.7.3",
"nya-bootstrap-select": "~2.0.8"
},
"devDependencies": {
"angular-mocks": "~1.3.7",
"angular-scenario": "~1.3.7"
},
"appPath": "app",
"resolutions": {
"angular": "1.3.8"
}
}
Here is my package.json
{
"name": "civilizationweb",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^0.7.3",
"grunt-concurrent": "^0.5.0",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-connect": "^0.7.1",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-cssmin": "^0.9.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.8.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^0.2.1",
"grunt-google-cdn": "^0.4.0",
"grunt-karma": "^0.9.0",
"grunt-newer": "^0.7.0",
"grunt-ng-annotate": "^0.10.0",
"grunt-svgmin": "^0.4.0",
"grunt-usemin": "^2.1.1",
"grunt-wiredep": "^1.7.0",
"jshint-stylish": "^0.2.0",
"karma": "^0.12.24",
"karma-jasmine": "^0.1.5",
"karma-phantomjs-launcher": "^0.1.4",
"load-grunt-tasks": "^0.4.0",
"time-grunt": "^0.3.1"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "grunt test"
}
}
Unless you tell grunt to copy these files to /dist folder as a part of the build process, it won't do anything. You can use grunt copy to do this.
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.client %>',
dest: '<%= yeoman.dist %>/public',
src: [
'*.{ico,png,txt}',
'.htaccess',
'bower_components/**/*',
'assets/images/{,*/}*.{webp}',
'assets/fonts/**/*',
'index.html'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/public/assets/images',
src: ['generated/*']
}, {
expand: true,
dest: '<%= yeoman.dist %>',
src: [
'package.json',
'server/**/*'
]
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.client %>',
dest: '.tmp/',
src: ['{app,components}/**/*.css']
}
},
I recommended you also use concat/usemin to concatenate all your javascript.
<!-- build:js({.tmp,client}) app/concat.js -->
<script src="app/app1.js"></script>
<script src="app/app2.js"></script>
<script src="app/app3.js"></script>
<!-- endbuild -->
This will create one concat.js files using the script tags between <!-- build:js --> tags. this file can then by copied using grunt copy.
I think that you need to add comments in the index.html to tell grunt where CSS and JS files should be added. Also if you change manually something between these tags, it will be overwriteen on the next restart of grunt (that's what i noticed not sure it's a standard feature)
<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
Here is what is generated by angular generator :
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<!-- endbower --><% if(filters.socketio) { %>
<script src="socket.io-client/socket.io.js"></script><% } %>
<!-- endbuild -->
<!-- build:js({.tmp,client}) app/app.js -->
<script src="app/app.js"></script>
<!-- injector:js -->
<!-- endinjector -->
<!-- endbuild -->
You need to encapsulate with build tag for grunt (and bower for bower)
the usemin task in your Gruntfile.js will look for
<!-- build:{{type}} {{path/fileName}} -->
and
<!-- endbuild -->
and will concatenate all the files listed between these two into one single file and minify that. this single minified file will be written at the path mentioned by you in {{path/fileName}}
...so if I'm understanding it well then your Gruntfile is perfectly fine and you are probably missing usemin comment blocks in your index.html
put all your link and script tags betweeen usemin blocks
for example for your bower components you can use something like this
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/ng-table/ng-table.css">
<link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
<link rel="stylesheet" href="bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css">
<!-- endbower -->
<!-- endbuild -->
<!-- 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/bootstrap/dist/js/bootstrap.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-messages/angular-messages.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>
<!-- endbower -->
<!-- endbuild -->
NOTE: all your bower component css files will go in vendor.css in styles directory i.e. dist/styles/vendor.css and similarly bower component js files will go in vendor.js in scripts directory i.e. dist/scripts/vendor.js
...and for your own js and css files you can use something like this
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/css1.css">
<link rel="stylesheet" href="styles/css2.css">
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
NOTE: here all your css files will go in main.css in styles directory i.e. dist/styles/main.css and similarly js files will go in main.js in scripts directory i.e. dist/scripts/main.js
...hope it helps :)
Check if you have set up in you html file. That is what triggers the grunt uglyfy/css min task.
Or you can just un-comment these tasks in your grunt config file and make sure they are un-comented in the buttom inside your build task.
Good luck