I am trying to use gulp-usemin to bundle my CSS and javascript files for production. gulp-usemin is working fine on my CSS files, but is not outputting anything in relation to my javascript files. Can somebody point out to me what I'm doing wrong?
I'm experiencing a problem similar to uglified files are not rewritten in html file using gulp-usemin, but the proposed solution isn't working.
For reference, my node version is v0.12.1 and my gulp versions are as follows:
"devDependencies": {
"gulp": "^3.9.1",
"gulp-minify-css": "^1.2.4",
"gulp-rev": "^7.1.2",
"gulp-uglify": "^2.0.0",
"gulp-usemin": "^0.3.24"
}
index.html
<html>
<head>
<meta charset="utf-8">
<!-- build:css css/site.css -->
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css" media="all" />
<!-- endbuild -->
<!-- build:js js/site.js -->
<script type="text/javascript" src='bower_components/gsap/src/minified/TweenMax.min.js'> </script>
<script type="text/javascript" src='bower_components/d3/d3.js'> </script>
<script type="text/javascript" src='bower_components/d3-tip/index.js'> </script>
<script type="text/javascript" src='bower_components/moment/moment.js'> </script>
<script type="text/javascript" src='chart.js'> </script>
<!-- endbuild -->
</head>
<body>
</body>
</html>
gulp file
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var usemin = require('gulp-usemin');
var minifyCss = require('gulp-minify-css');
gulp.task('build', function() {
return gulp.src(['index.html'])
.pipe(usemin({
css: [minifyCss()],
js: [uglify()]
}))
.pipe(gulp.dest('dist/'));
});
After running gulp build I am generated a dist directory as follows
dist/
css/
site.css
index.html
And my generated index.html is
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/site.css" media="all"/>
</head>
<body>
</body>
</html>
Is there something obvious that I'm missing? Why would the css block work but the js block silently fail?
The regex used by gulp-usemin doesn't allow for any whitespace between the opening <script> and closing </script> tag. Neither does it allow a type="text/javascript" attribute.
See this regex101 page for a matching and non-matching example.
So this:
<!-- build:js js/site.js -->
<script type="text/javascript" src='bower_components/gsap/src/minified/TweenMax.min.js'> </script>
<script type="text/javascript" src='bower_components/d3/d3.js'> </script>
<script type="text/javascript" src='bower_components/d3-tip/index.js'> </script>
<script type="text/javascript" src='bower_components/moment/moment.js'> </script>
<script type="text/javascript" src='chart.js'> </script>
<!-- endbuild -->
Should be like this:
<!-- build:js js/site.js -->
<script src='bower_components/gsap/src/minified/TweenMax.min.js'></script>
<script src='bower_components/d3/d3.js'></script>
<script src='bower_components/d3-tip/index.js'></script>
<script src='bower_components/moment/moment.js'></script>
<script src='chart.js'></script>
<!-- endbuild -->
Related
I have index.html file where I have html head body tags and I have constant.js file from which I want to use a constant. how to define that constant in constant.js and how to use it in index.html and where to place the import statement.
When I include with this in the head section of HTML
<script type="module" src="../home/constants.js"></script>
constants.js file contains only this
const surl = "http://localhost:8000/"
I got this error in browser
Loading module from “http://localhost:8000/constants.js” was blocked because of a disallowed MIME type (“text/html”)
Also I am not able to use the the sdata_url
Uncaught ReferenceError: sdata_url is not defined
here is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title >CandleCharts</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<!-- my modules -->
<script type="module" src="../home/constants.js"></script>
</head>
<body>
<div id="top_bar">
</div>
<div id="container" style="height: 700px; min-width: 310px" class="chart"></div>
<script type="text/javascript">
console.log(sdata_url)
</script>
</body>
</html>
<script type="module" >
import {sdata_url} from "../js/constants.js";
console.log(sdata_url);
</script>
In the above way I was able to use the sdata_url
Am using a html website template to build an angular project, but am having issues with a custom js script. menu button(to toggle navigation) and some other stuffs in custom.js is not working
i tried linking the scripts files link in index.html, and referenced it in angular.json config file
here is github link to the file https://github.com/donprecious/crtx
here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CREXT | DRD</title>
<!--
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<app-root></app-root>
</div>
<!-- jQuery -->
<!-- <script src="assets/vendors/"></script> -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<script src="assets/vendors/nprogress/nprogress.js"></script>
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts.min.js"></script>
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<script src="assets/vendors/skycons/skycons.js"></script>
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<script src="assets/vendors/DateJS/build/date.js"></script>
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/site.js"></script>
</body>
</html>
Angular.json
"scripts": [
"src/assets/vendors/jquery/dist/jquery.min.js",
"src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
"src/assets/vendors/fastclick/lib/fastclick.js",
"src/assets/vendors/nprogress/nprogress.js",
"src/assets/vendors/Chart.js/dist/Chart.min.js",
"src/assets/vendors/echarts/dist/echarts.min.js",
"src/assets/vendors/gauge.js/dist/gauge.min.js",
"src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
"src/assets/vendors/iCheck/icheck.min.js",
"src/assets/vendors/skycons/skycons.js",
"src/assets/vendors/Flot/jquery.flot.js",
"src/assets/vendors/Flot/jquery.flot.pie.js",
"src/assets/vendors/Flot/jquery.flot.time.js",
"src/assets/vendors/Flot/jquery.flot.stack.js",
"src/assets/vendors/Flot/jquery.flot.resize.js",
"src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
"src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
"src/assets/vendors/flot.curvedlines/curvedLines.js",
"src/assets/vendors/DateJS/build/date.js",
"src/assets/vendors/jqvmap/dist/jquery.vmap.js",
"src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
"src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
"src/assets/vendors/moment/min/moment.min.js",
"src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
"src/assets/js/custom.js",
"src/assets/js/site.js"
]
},
custom.js file
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
this code does not work when i integate the website template, but works when i just click run the template browser
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
it seems that the javascript are rendered,
but when i click on button to toggle menu or any control that as to work with jquery it doesnt work
I made a dashboard with Angular.
I included all my scripts in my index.html, but every time I click a link, only the html and css are executed.
The Javascripts' actions are not executed such as graphs that i implemented.
I have to reload the page for everything to work normally.
That is my index.html source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
<!-- Tabs -->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable();
});
</script>
<!--Pizza-->
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/exporting.js"></script>
<script src="assets/js/pizza.js"></script>
</body>
</html>
Case angular-cli and latest version, copy path of your scripts in angular-cli.json.
Ex.:
"scripts": [
"assets/js/dataTables/jquery.dataTables.js"
],
This code is just supposed to print "Hello world" using an AngularJS directive, but instead of that, the page is blank when I load it in my browser.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
</body>
</html>
And the app.js:
angular
.module("ngClassifieds", ["ngMaterial"])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
})
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
The paths in the script elements are correct, there are no typos as far as I'm concerned, and I'm pretty sure nothing is wrong with my port. I'd appreciate any help on what I'm doing wrong!
You are missing the references for the angular-material, because its a dependency,
DEMO
angular
.module("ngClassifieds", ["ngMaterial"])
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-app="ngClassifieds">
<hello-world></hello-world>
</body>
</html>
You are not loading Angular-material.js file
.module("ngClassifieds", ["ngMaterial"])
-------------------------------------^
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
Refere Angular-Material Git-Hub page for more info
I want to implement javascript flip counter. I included all needed files and added code as in this article - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo.
I added html in my page:
<div id="counter" class="flip-counter"></div>
and added javscript to my application.js:
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
here is my included files(js and css):
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.8.22.custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-flipcounter.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.22.custom.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
I will also write here what files demo page is including:
<!-- My flip counter script, REQUIRED -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<!-- Style sheet for the counter, REQUIRED -->
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<!-- jQuery from Google CDN, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
and here is rar archive with working counter: https://dl.dropbox.com/u/86122402/cnanney-apple-style-flip-counter-13fd00129a41.rar.
add this to your application.js
$(function(){
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});
Everything looks like it should work.
Try adding you JavaScript inside a self anonymous invoking function.
$(function(){
var myCounter = new flipCounter("counter", { inc:123, pace:600});
});
Also make sure all your included files point to the right location.
Replace it with the following to test.
<script type="text/javascript" src="js/flipcounter.js"></script>
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />