Here is the snippet of my index.html, generated by yeoman webapp generator
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/alertify/alertify.min.js"></script>
<script src="../bower_components/keymaster/keymaster.js"></script>
<!-- endbower -->
<!-- endbuild -->
It should include my alertify css file as well, as you can see, it's empty there, only include the javascript file, my alertify css file are under ../bower_components/alertify/theme which in the default directory of bower
Is it a bug for auto build system not doing it's job completely or I missed something?
Related
I have this project where I applied a theme (getelella in exact) where when I left it looks good and fine (save the project and shutdown pc), but when I open my project again the layout is messed up. I created a new project and it happened again. Can you help me guys what could be the problem here please?
Update, additional info:
At every time I freshly open my project, I run it to check my current progress but it doesn't start to build and it stays there for 20 mins before it runs the project.
As requested in the comment:
<!-- Bootstrap -->
<link href="~/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link href="~/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- NProgress -->
<link href="~/vendors/nprogress/nprogress.css" rel="stylesheet" />
<!-- iCheck -->
<link href="~/vendors/iCheck/skins/flat/green.css" rel="stylesheet" />
<!-- bootstrap-progressbar -->
<link href="~/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" />
<!-- JQVMap -->
<link href="~/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="~/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<!-- Custom Theme Style -->
<link href="~/build/css/custom.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="~/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="~/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="~/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="~/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="~/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="~/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="~/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="~/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="~/vendors/Flot/jquery.flot.js"></script>
<script src="~/vendors/Flot/jquery.flot.pie.js"></script>
<script src="~/vendors/Flot/jquery.flot.time.js"></script>
<script src="~/vendors/Flot/jquery.flot.stack.js"></script>
<script src="~/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="~/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="~/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="~/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="~/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="~/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="~/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="~/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="~/vendors/moment/min/moment.min.js"></script>
<script src="~/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="~/build/js/custom.min.js"></script>
I had a similar problem with some static html pages, and I have found out that there were a couple of JavaScript libraries placed in the wrong place. So I sought for the paths in your script. I see that all of them begin with a tilde:
<script src="~/vendors/bootstrap-daterangepicker/...
<script src="~/build/js/...
I have changed the paths in one of my pages and replaced two dots with a tilde and... bingo! the layout was lost. Then I have changed them back to two dots, like this:
<script src="../vendors/bootstrap-daterangepicker/...
<script src="../build/js/...
and... voilá! the layout was back again.
I suggest you check carefully your paths and change the beginning tilde to dots or whatever be needed and see if you can get your project to work.
I'm developing a website using LESS and I can't seem to get it working. I just keep getting the following message:
Less has finished and no sheets were loaded.
I'm running on a http-server web server to see the effect of the less and my Chrome Console has no errors or 404's etc. The code I have in place is super basic as I'm just testing for the time being. Only thing I can think it might be is a script ordering issue or maybe a conflict?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TrakMan | Re-Brand | Version 1</title>
<!-- LESS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<!-- Styles and Fonts -->
<!-- Font Import -->
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Trakman Styles -->
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body>
<!-- JS SCripts -->
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome CDN-->
<script src="https://use.fontawesome.com/c704ae342d.js"></script>
</body>
</html>
variables.less:
// Colours
#primary: #F86301;
#primary-light: #FF8C3A;
#primary-lighter: #FFA564;
#primary-dark: #C75200;
#primary-darker: #9C4100;
#dark: #222;
#light: #E7E7E7;
// Fonts
#family: 'Maven Pro', sans-serif;
#size: 14px;
styles.less:
#import "variables.less";
html {
font-family: #family;
font-size: #size;
}
body {
background: #dark;
}
This code works, bootstrap is loaded inside of the head tag.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<!--some stuff-->
</body>
</html>
But when I put that code in a component.html file and import it:
<html>
<head>
<link rel="import" href="component.html" >
</head>
<body>
<!--some stuff-->
</body>
</html>
Bootstrap doesn't work.
Can someone help me?
component.html:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You would need to place this script tag, just before the closing body tag
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Jquery library must be loaded First or prior to this https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js file.
As this bootstrap.js is written using Jquery itself we need the main library to be loaded first so that the code inside the bootstrap file is meaningful, Else the browser compiler has no clue of the code, Hence the error.
I know that this isn't an embedded package any more. In my composer.json I have:
"require": {
...stuff...
"illuminate/html": "5.*"
}, etc.
In app.php I have:
'providers' => [
...stuff...
'Illuminate\Html\HtmlServiceProvider',
...more stuff...
],
'aliases' => [
...stuff...
'Html' => 'Illuminate\Html\HtmlFacade'
], etc.
I have run composer update, so why is it not recognising when I use HTML::script()? This is the Blade template that is throwing the error:
<!DOCTYPE HTML>
<html lang="en">
<!-- USER LOGIN SECURITY -->
<!-- require('redis-session.php');
RedisSession::start();
#if (!isset($_SESSION['HTTP_SHIB_EP_EMAILADDRESS']))
header('Location: https://resviz.ncl.ac.uk/signin?redirect=https://resviz.ncl.ac.uk/wos/index.php');
die();
#endif -->
<head>
<title>Academic Intelligence</title>
<!-- LINKS -->
<!-- local css file -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Corporate visual identity -->
<link href="//resviz.ncl.ac.uk/static/style/cvi.css" media="screen" rel="stylesheet" type="text/css" />
<!-- bootstrap css -->
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css" rel="stylesheet">
<!-- fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<!-- META -->
<meta charset="UTF-8"/>
<!-- ensure proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- BREADCRUMBS -->
<div class="sg-orientation">
Skip to Content
<span class="sg-breadcrumbs">
Newcastle University >>
Research Visualisation >>
<strong href="#">Academic Intelligence</strong>
</span>
</div>
<!-- TITLE BAR -->
<div class="sg-titlebar">
<h1><a title="Newcastle University Homepage" accesskey="1" href="http://www.ncl.ac.uk/"/><span title="Newcastle University">Newcastle University</span></a></h1>
<h2>Academic Intelligence</h2>
</div>
<div class="sg-navigation"> </div>
<div class="sg-content">
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
</ul>
</div> <!-- navbar-collapse -->
</div> <!-- container -->
</nav> <!-- navbar -->
<!-- main content -->
<section class="container">
{{-- unique section to other pages --}}
#yield('content')
</section> <!-- main content; container -->
</div> <!-- sg-content -->
<!-- FOOTER -->
<div class="sg-clear"> </div>
<div class="sg-footer">
<p>Research & Enterprise Services<br/>Newcastle University, Newcastle Upon Tyne,<br/>NE1 7RU, United Kingdom<br/>Email Webmaster<br/><br/>© {{ date('Y') }} Newcastle University</p>
</div>
<!-- SCRIPTS -->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- local script -->
{{ HTML::script('js/script.js') }}
<!-- bootstrap js -->
{{ HTML::script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')}}
<!-- angularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- check browser version, if outdates, prompt for update -->
<script src="//browser-update.org/update.js"></script>
</body>
</html>
I am moving this existing web application into Laravel and so am trying to implement the various Blade components. In this case changing what was <script src="script.js"></script> to {{ HTML::script('js/script.js') }}. I cannot understand why the HTML Class is not being recognised though...
You can use the {!! HTML::script('whatever') !!}.
In Laravel 5 or 5.1, mostly you can use {!! codes !!} instead of {{ codes }}.
i am trying to use gulp-useref with django. All my inject scripts are working fine, doing manual path update after injecting, but now i want to concat my injected scripts. here is my html
<!-- build:css({compile/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="{{ STATIC_URL }}dash/bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}dash/bower_components/nvd3/src/nv.d3.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({compile/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="{{ STATIC_URL }}dash/compile/serve/styles/main.css">
<!-- endinject -->
<!-- endbuild -->
and
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="{{ STATIC_URL }}dash/bower_components/angular/angular.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-animate/angular-animate.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-touch/angular-touch.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-resource/angular-resource.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-route/angular-route.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-aria/angular-aria.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-material/angular-material.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angular-messages/angular-messages.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/pace/pace.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/d3/d3.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/nvd3/nv.d3.js"></script>
<script src="{{ STATIC_URL }}dash/bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({compile/serve,src}) scripts/app.js -->
<!-- inject:js -->
<script src="{{ STATIC_URL }}dash/src/js/dashboard/services/api/campaigns.js"></script>
<script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/navigation/sidebar.js"></script>
<script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/navigation/header.js"></script>
<script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/forms/company-settings.js"></script>
<script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/forms/campaign-create.js"></script>
<script src="{{ STATIC_URL }}dash/src/js/dashboard/directives/file-reader.js"></script>
<script src="{{ STATIC_URL }}dash/src/js/app.js"></script>
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
I just want to remove {{ STATIC_URL }}dash from the path, as this is the root where my gulpfile.js resides, (different from index.html directory), process the scripts into respective files and then update my index.html with compiles css and js .. but prepend {{ STATIC_URL }}dash
We had a similar issue recently, and gulp-replace did a wonderful job here. You would use it somehow like this:
gulp.src('path/to/my/index.html')
.pipe(replace(/{{ STATIC_URL }}dash/g,'withsomethingelse')
.pipe(/* start the useref stuff now */)
I'm not sure how gulp will behave concerning paths... might be that you have to replace the static URL with something relative to the index.html rather than the gulpfile.