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
Related
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
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 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 -->