While staging with grunt (grunt serve) I am getting:
Running "bower-install:app" (bower-install) task
popcornjs was not injected in your file.
Please go take a look in "app\bower_components\popcornjs" for the file you need, then manually include it in your file.
I have added Popcorn.js to bower.json:
{
"name": "NAME",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
.
"popcornjs": "~1.3.0",
.
"angular-slugify": "1.0.0"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
So as to my index.html:
<s_cript src="bower_components/popcornjs/popcorn.js"></script>
<s_cript src="bower_components/popcornjs/modules/player/popcorn.player.js"></script>
<s_cript src="bower_components/popcornjs/players/youtube/popcorn.youtube.js"></script>
<s_cript src="bower_components/popcornjs/plugins/code/popcorn.code.js"></script>
.'.'
Am I doing missing something? The other libraries working fine.
I just did a quick search on popcornjs. The repo you pull from when you say bower install --save popcornjs is https://github.com/mozilla/popcorn-js/. That repo has a bower.json file, and that file has a main property in it. That property tells grunt-bower-install what file to inject in your HTML.
However, you are using version ~1.3.0, which would pull down this: https://github.com/mozilla/popcorn-js/tree/v1.3.0. That doesn't have a bower.json, thus grunt-bower-install has no way of knowing what file to include.
The solution is to manually include it in your HTML, or upgrade to the newer version that uses Bower properly.
Related
My current site is build with html+css (scss) and using a NPM build script (see below). I now want to add a few JS libraries to my website (for example: lozad).
So far I've downloaded the dependencies for it. As I'm not familiar with JS, I don't understand the other steps I need to take. I tried following the documentation but it's not working so far.
I now assume that this is because my current NPM build script doesn't track JS, so any JS wouldn't be shown on my devserver. So maybe it did work, but just not in test?
Can anyone point me in the direction of what I need to do to make it working, and/or how to update my NPM script?
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"devDependencies": {
"autoprefixer": "^9.6.0",
"concat": "^1.0.3",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.2",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"aos": "^2.3.4",
"lozad": "^1.9.0",
}
}
You just need to give the relative path to the dependency and run the script like so:
"scripts": {
...
"lozad": "npm run ./node_modules/lozad/index.js --argument"
}
Note that this is only assumed data. The real path and file are probably called something else (Just look into the node:modules folder for lozad).
According to this article, you can also omit the path and the npm rum when there is a .bin folder for that dependency, but I have not tested that.
Edit
In case you meant on how to use the library locally.
You have to add the package to your dependencies (Like you did) and then call
npm install
in your project directory. It will install all your dependencies specified in package.json.
You can omit the manual "add dependency to file" step by simply calling:
npm install --save lozad
After that you can use it in your project like so:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require('lozad')
If you don't know which one to use, just try them - your IDE will tell you if something is wrong.
When you imported the library, you can use it like described at the Usage Description.
This is an angular app. I have a bower.json with a lot of libraries put like this:
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.2.0",
...
"angular-socket-io": "^0.7.0",
"socket.io-client": "^1.7.2"
I run
bower install
and I can see that in the "bower_components"-folder there are folders and files for both "angular-socket-io" and "socket.io-client".
When I then run this command:
grunt serve
I can see that this one is included:
<script src="bower_components/angular-socket-io/socket.js"></script>
However, I cannot find any trace of "socket.io-client". Why? Am I supposed to include this manually? I wonder why then. All the other bower cmopoenents are beeing added autmatically of "grunt serve".
PS: This causes the error "io is not defined" when I try to instantiate a socket frmo a factory.
I guess it was an issue with versions.
Im running angular 1.4.
Having this line:
"socket.io-client": "^0.7.10",
seems made the trick. Before I used latest version of socket.io-client (1.7). And I got incompatibility error.
But now the socket-client is being loaded.
I havew created a new Asp.net core project and im trying to install Knockout.js, im doing so by following Knockoutjs install
Problem is, i add the knockout to my bower (latest version 3.4.0 not 3.3.0).
"knockout": "^3.4.0"
}
I hit save, then go to the wwwroot/lib folder and Knockout folder is there.
However it looks like this ...
As you can see there are 2 folder src and build but no knockout.js, infact the whole directory doesnt contain a knockout.js file.
So im wondering whats the issue here? did something change and made the tutorial not valid? Am I doing somethiong stupid here?
EDIT: I have a feeling this is the source and needs building not sure though
EDIT2: Heres the Gruntfile.js located in proj source used in conjuntion with the trask runner as per the tutoriual i was following.
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
}
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
};
I think my gruntfile is missing some key stuff here, just not sure what (not well versed in grunt im afraid)
Bower pulls the whole package and puts it into "bower_packages/package_name" folder. You can force bower to change default destination directory (in your case it is "wwwroot/lib" folder) but it still gets whole package.
In order to put in the "wwwroot/lib" folder only package build results (files mentioned in the package's bower.json main" property) I'm using "bower-installer" tool. It calls bower to get packages and then gets "main" files for each package and put them in destination folder.
Update 1
bower.json
{
"name": "_______",
"version": "0.0.0",
"dependencies": {
"jquery": "~2.1.0",
"jqueryui": "~1.11.4",
"knockout": "^3.4.0"
},
"install": {
"path": "wwwroot/lib",
"sources": {
"knockout": {
"mapping": [
{
"bower_components/knockout/dist/knockout.debug.js": "knockout.js"
}
]
}
}
}
}
Presumable bower and bower-installer packages are installed globally.
Just create bower.json file in any empty folder and run "bower-installer" command from command line in this folder. You should get "bower_components" folder with full package and "\wwwroot\lib\knockout\knockout.js" file. I've just checked it.
From what I understand, the common way to deploy a Javascript app is to take all your dependencies and put them all in one file (and then minify it). I don't understand how the code I wrote will then find the modules that are now all in this new file. I'm using node.js if that matters and use a gulp task like this to do the bundling:
gulp.task('bundle_deps', function() {
return gulp.src('src/**/*.js')
.pipe(concat('bundle.js'))
.pipe(gulp.dest(deploy_dir));
});
If you're talking about deployment, then the way to do this in node.js is to put your dependencies in the package.json file. For example:
{
"name": "yourAppName",
"version": "0.0.1",
"dependencies": {
"restify": ">= 2.6.0",
"node-restify-validation": "0.0.6",
"node-restify-swagger": "0.1.6"
}
}
See: https://docs.npmjs.com/files/package.json#dependencies
Then when you deploy the application, copy your code to the server and run the command
npm install
npm will read the dependencies in the package.json file and install them all for you.
I've started to use bower-rails to manage css/js assets in my rails projects.
By default the dependences are being installed in vendor/assets/bower_components.
The problem is that bower copies the whole packages, including sources, examples, licenses, etc.
I don't have problem to get rid of all those files, but I'm wondering if is necessary to include even the important files, as I think it should be the programmer's responsibility to load those dependences in the computer where is loading the project(maybe with grunt?), besides is supposed you should not touch the vendor packages as they are not your responsibility(regarding all those crappy files I want to delete).
My point is: Is there any kind of "best practice" related with bower packages and version control?
I recently used bower-rails for the first time and had Git ignore the vendor/assets/bower_components directory to good effect.
If you choose to have Git ignore bower_assets, you SHOULD specify a known good version of each library in bower.json instead of using latest to avoid version conflicts.
I'm using bower and bower-installer in my Rails 4.2.x app, without using any gems for javascript dependencies. I'm still using the asset pipeline.
I added vendor/assets/bower_components to my .gitignore file. I use bower-installer to copy just what I need to vendor/assets/{javascripts,stylesheets}, which are in source control.
I think that this gives me the best of both worlds: version control of JS libraries so updates are relatively easy, but no chance of a production deploy failing because someone removed 'leftpad' from the node repo.
Here's a trimmed-down version of my bower.json file (in source control). Note that jquery-form is not in the bower repo, so I included the path to the download file.
{
"name": "icots",
"main": "",
"private": true,
"ignore": [
"**/.*",
"bower_components",
"vendor/assets/bower_components",
"lib"
],
"dependencies": {
"jquery": "^3.1.1",
"jquery-ui": "^1.12.1",
"jquery.form": "http://malsup.github.io/min/jquery.form.min.js"
},
"install": {
"path": {
"js": "vendor/assets/javascripts",
"css": "vendor/assets/stylesheets",
"/[sc|le]ss$/": "vendor/assets/stylesheets"
},
"sources": {
"jquery": "vendor/assets/bower_components/jquery/dist/jquery.min.js",
"jquery-ui": "vendor/assets/bower_components/jquery-ui/jquery-ui.min.js",
"jquery-form": "vendor/assets/bower_components/jquery.form/index.js"
}
}
}