Hope you can help me , I cant seem to find an installation file for jasmine.
I want to learn how to use it, but i can't understand the download and installation process , neither can I find the Zip folder.
Thanks ,
jasmine is available as a npm package and as a standalone package here. In the standalone version you can find examples how to use it.
Even though this one has been answered, here are the steps I took to successfully set up Jasmine on my local box.
Clone Jasmine - git clone https://github.com/pivotal/jasmine.git
Create a Jasmine directory in your project - mkdir my-project/jasmine
Move latest dist to your project directory - mv jasmine/dist/jasmine-standalone-2.0.0.zip my-project/jasmine
Change directory - cd my-project/jasmine
Unzip the dist - unzip jasmine-standalone-2.0.0.zip
Add the following to your HTML file:
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/boot.js"></script>
I've submitted a PR to the main project for this to be added to the README.
Related
My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)
There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");
I am trying to build a website using materializecss's carousel component. I successfully did it on this stackblitz and then tried to export it to my computer, but I ran into some issues.
Steps to reproduce :
Export project
Unzip
npm install
ng serve -o
That produces the error "cannot find module '#angular-devkit/core'.
I installed it using npm install --save #angular-devkit/core, and then tried to run the project again, this time getting the following error :
Error message "Cannot find name '$'
I'm new to Angular so I might be missing something very obvious here, but from what I gathered, that must be an issue with the import of jquery.
I thought importing via link in my index.html was enough, but I've had to also add all the links in the "external resources" on stackblitz to make it work.
I would guess that this is the import part that was not correctly added to the project I downloaded, but then how and where do I have to add the import on my local project?
<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<my-app>loading</my-app>
</body>
So for example say I installed something:
npm install --save something
and it downloads into
./node_modules/something/
and it has a folder in there perhaps called styles and in that folder you have something.css. How would I include that css file in my html document (if my html document was along-side the node-modules folder?
I mean I could do this in my html head:
<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />
But it feels wrong to go dig in your node_modules directory for stuff. Especially if the html document perhaps needs to get minified and then thrown into some ./dist/ directory. Because then the path to something.css is off..
Isn't there a way to simply just go:
<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
in your html document - regardless of where it's sitting in your project structure - and it'll just know where to go find that css file?
There is a package for this called npm-css
In webpack you can require css like require('bootstrap.css'), this is why installing css via npm quite useful
if you don't have it, you can create a npm script task that would require (with fs.readFile) all the css files from the node_modules, compile them into single file (which is what npm-css does)
Actually there's no need to reference the css files explicitly in your html head.
Because you've already involved the css library via npm ,once you run npm start to run your project , Node.js will load all the node_moudules which also includes the css libraries you need.
Depending on which module loader you are using . For example Webpack
then please read this link https://github.com/JedWatson/react-select/issues/176
Otherwise in your server you need to have node_modules as static file directory and then you can safely do
<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />
and it correct no harm in that
I use bower to require my fronted css/js dependencies, I referenced all of them from my index.html view which also include my react app bundle in this html.
For the bundle.js of my react app everything is OK and webpack does the job well.
My question is how can I automate the process of combining all the style import from bower_component directory using webpack (css + js) ?
Does a tool can go throw the index.html file and then when see the import (which in my case is something like this :
<link rel="stylesheet" href="/public/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/public/plugins/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/public/plugins/summernote/dist/summernote.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.skinFlat.css">
<script src="/public/plugins/summernote/dist/summernote.min.js"></script>
replace the content of the file using the URL of the file, moreover even if the URL is relative and defined static in expressJS.
Gulp can be the tool but it would be great if one tool can do all the job.
Gulp inject seems interesting https://www.npmjs.com/package/gulp-inject but no options for relative URL and to take only the file required in the index.html file.
I cannot use gulp and say all the js/css in the bower component because they are not all used and I don't want to more them to be able to update the component easily.
I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>