I'm using yeoman, grunt and bower and highstock library.
When I build my app (grunt build) this generate these 3 lines
<script src="bower_components/highstock/js/highcharts.src.js"></script>
<script src="bower_components/highstock/js/highstock.src.js"></script>
<script src="bower_components/highstock/js/highcharts-more.src.js"></script>
BUT, as highstock includes high charts this line should not be there and this makes errors
<script src="bower_components/highstock/js/highcharts.src.js"></script>
the error is http://www.highcharts.com/errors/16
How to remove this line in the build ?
Thanks for your help.
I believe this is grunt-bower-install at work. gbi is a task that looks through the dependencies in your project's bower.json, and injects their appropriate references into your HTML. In order for it to work, each Bower package needs to specify a main property in its bower.json file.
So, the bower.json file for highcharts looks like this:
{
"name": "highcharts",
"version": "v3.0.10-modified",
"main": [
"js/highcharts.src.js",
"js/highcharts-more.src.js",
"js/modules/exporting.src.js"
],
"ignore": [
"errors",
"exporting-server",
"gfx",
"lib",
"samples",
"studies",
"test",
"tools",
"utils",
"ant",
"build.md",
"build.properties",
"build.xml"
]
}
Because it lists 3 different files, gbi is interpreting that as "you need these three files to make this Bower package work." I have no familiarity with highcharts, but if you know that to be false-- in other words, you only need one of those files for it to work-- then it would be helpful to you and others to send a pull request correcting their bower.json file.
As far as a fix for now, you can specify an overrides property in your project's bower.json, that lists only the file you need, such as:
{
"name": "your-project",
"dependencies": {
"highcharts": "~3.0.0"
},
"overrides": {
"highcharts": {
"main": "js/highcharts.src.js"
}
}
}
The next time you run grunt bowerInstall, it will sort itself out.
Note: Make sure you're using the latest grunt-bower-install to use the new overrides feature.
Related
I keep on getting ES6 jshint warnings, for example:
''import' is only available in ES6 (use 'esversion: 6'). (W119)'
source: 'jshint'
code: 'W119'
I followed suggestions such as
Adding a .jshintrc file in the root with
{
"esversion": 6
}
Adding the following to the user and\or workspace settings:
"jshint.options":{
"esversion":6
}
But I still get the warning. Are there other things that I can do?
Thanks
Add a file .jshintrc into your project root, the warnings will disappear.
{
"esversion": 6
}
jsHint's ES6 warning can be solved easily by the following JSON code without creating any new file:
Paste the code inside the JSON editor of the "user settings".
"jshint.options": { "esversion": 6 },
jsconfig.json file which defines the JavaScript target to be ES6
I create a jsconfig.json file under my project directory and add codes in it:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
According to the JSHint documentation: https://jshint.com/docs/ "In addition to using configuration files you can configure JSHint from within your files using special comments. These comments start with a label such as jshint or globals..."
So, a /* jshint esversion: 6 */ comment will work on the top of each file targeting ES6.
This have the advantage of you can switch these directives on and off per file or per function: "These comments are function scoped meaning that if you put them inside a function they will affect only this function's code."
Does NYC/Istanbul code reporting tool ignore template and style tags within a VueJS component file (with the extension .vue). Is nyc smart enough to do that?
Yes, it is possible #light24bulbs! I've made nyc + Vue + Mocha work here.
I've failed some times before making it work, thought. The thing that made the trick was to manually select the defaults while (re)creating the project with vue-cli. Vue-cli has proven to be much better than me configuring webpack.
$ node --version
v10.16.0
$ vue --version
3.11.0
//package.json
...
"scripts": {
...
"test": "nyc vue-cli-service test:unit"
},
"nyc": {
"extension": [
".js",
".vue"
]
},
"devDependencies": {
"nyc": "^14.1.1",
...
When I run lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in the command line, everything is working. The styles.map file ends in:
...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"}
However, when I run grunt less, the styles.map is missing the "file" part and just ends in:
...AV2rEF;EAAiB,aAAA"}
This stops the SourceMap from working. What could be going wrong? My less config is as follows:
less: {
dist: {
options: {
sourceMap: true,
sourceMapFilename: 'styles.map'
},
files: [{
src : 'assets/less/00_style.less',
dest: 'dest/assets/prod.css'
}]
}
}
Short answer:
Add the following additional option to your less Task in Gruntfile.js:
...
options: {
...
sourceMapURL: '../../styles.map'
},
...
Long answer:
When running the lessc command via the CLI, (as per your example), notice the the following comment is written to the resultant prod.css:
/*# sourceMappingURL=../../styles.map */
However, when running the grunt task, (using your current config), the following comment is written into the resultant prod.css:
/*# sourceMappingURL=styles.map */
Note the missing ../../ - therefore prod.css can't find styles.map
This is why your SourceMap isn't working and not so much to do with the "file:" missing in styles.map when run via grunt. The .css file ultimately points to the .map file - not vice versa.
Even after running the lessc command via the CLI then deleting the "file:" part from styles.map you will find that the SourceMap still works in the browser. Indicating that the "file:" part, whether included in the .map file or not, has no effect on preventing the SourceMap from working.
Besides, as noted in the most recent proposed SourceMap spec (v.3) the "file:" part is optional:
Line 3: An optional name of the generated code that this source map is associated with.
Explicitly defining the sourceMapURL in your grunt Task options will entail having to keep a flat folder structure inside the dest/assets/ directory if you intend on using multiple .less files. (I.e. You'll need to avoid saving any resultant .css files in subfolders)
I apologize for being a complete grunt newbie. I have node.js installed, i have grunt installed, and I am able to run "grunt less" on a gruntfile.js with a less target. It "runs", but it doesn't do anything.
My .less files live in a source respository: C:\Workspace\dev, in directories like:
C:\Workspace\dev\Webs\RP\Content\p1\less\p1.less
C:\Workspace\dev\Webs\RP\Content\p2\less\p2.less
My gruntfile.js file lives in C:\Tools\Grunt (at least as I am learning), so I need to run the "grunt less" command from C:\Tools\Grunt.
Some questions:
1. How can I run grunt from "anywhere" rather than where the gruntfile.js lives? I'm trying to integrate compiling less files as part of the build.
How do I specify the "home directory" for the .less files so I don't have to specify full paths to source and dest? In my case, home directory would be C:\Workspace\dev\Webs\RP\Content, and my less files: would be something like:
"rp1/less/rp1.css": "rp1/less/rp1.less" (there are several that need to be compiled).
Thanks in advance.
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
less: {
options: {
paths: ["/c/Workspace/dev/Webs/RP/Content"]
},
files: {
"rp1/less/rp1.css": "rp1/less/rp1.less",
"rp1/less/ie9.css": "rp1/less/ie9.less",
"rp2/less/rp2.css": "rp2/less/rp2.less",
"rp3/less/rp3.css": "rp3/less/rp3.less",
"rp4/less/rp4.css": "rp4/less/rp4.less",
"rp4/less/ie9.css": "rp4/less/ie9.less",
"rp5/less/rp5.css": "rp5/less/rp5.less",
"rp5/less/ie9.css": "rp5/less/ie9.less"
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
};
You should read up on how to use the files object in Grunt. Basically, you want a wildcard pattern, rather than having to specify each file individually. I think something like this might work:
files: [
{
expand: true,
src: ['**/*.less'],
},
]
Haven't tested though. You might need a 'dest' property also (either empty or just './') if it's not smart enough to figure it out on its own.
Also consider using gulp instead of grunt if you're just starting your project, I find the way it separates out the 'src' and 'dest' config rather than combining them into a 'files' object much more natural. Also I've worked with less and sass and have found the latter to be vastly superior (mostly because of the mixin libraries available, but it's also a more capable language in its own right), and it's pretty easy to move across from one to the other.
I am using command line options in my grunt script: http://kurst.co.uk/transfer/Gruntfile.js
However the command grunt --vers:0.0.1 always returns 'undefined' when I try to get the option:
var version = grunt.option('vers') || '';
Can you help me get this working ?
I tried different (CLI) commands:
grunt vers:asd
grunt -vers:asd
grunt vers=asd
as well as using :
grunt.option('-vers');
grunt.option('--vers');
But no luck so far. Hopefully I am missing something simple.
This is my package.js file:
{
"name": "",
"version": "0.1.0",
"description": "Kurst EventDispatcher / Docs Demo ",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-yuidoc": "*",
"grunt-typescript": "~0.1.3",
"uglify-js": "~2.3.5",
"grunt-lib-contrib": "~0.6.0",
"grunt-contrib-uglify":"*"
}
}
The proper syntax for specifying a command line argument in Grunt is:
grunt --option1=myValue
Then, in the grunt file you can access the value and print it like this:
console.log( grunt.option( "option1" ) );
Also, another reason you are probably having issues with --vers is because its already a grunt option that returns the version:
★ grunt --vers
grunt-cli v0.1.7
grunt v0.4.1
So it would probably be a good idea to switch to a different option name.
It is worth mentioning that as the amount of command line arguments you want to use grows, you will run into collisions with some arguments that grunt uses internally.
I got around this problem with nopt-grunt
From the Plugin author:
Grunt is awesome. Grunt's support for using additional command line options is not awesome. The current documentation is misleading in that they give examples of using boolean flags and options with values, but they don't tell you that it only works that way with a single option. Try and use more than one option and things fall apart quickly.
It's definitely worth checking out