I keep getting this error with UNCSS: 'Warning: Destination (dist/css/main.css) not written because src files were empty. Use --force to contine. Aborted due to warnings.
I believe it's running the task fine and is set up properly. I can use grunt for other things.
In gruntfile.js, I've included: grunt.loadNpmTasks('grunt-uncss');
and
uncss: {
dist: {
files: {
'dist/css/main2.css': ['../index.html']
}
}
}
I'm not sure what's wrong, but I think it's the pathing, but that's just how it is. I'm also using SCSS, so maybe it needs a raw css as SRC? I've tried reinstalling PhantomJS and the raw UNCSS without Grunt, but I'm going no where! Any ideas?
I found the solution.
It wasn't necessarily the pathing, but how the pathing was presented.
I was using
files: {
'dist/css/main2.css': ['../index.html']
}
I switched to
files: [
{ src: 'index.html', dest: 'dist/css/main.css' }
]
Here, the src & dest are declared.
This blog helped me deanhume.com.
The github/NPM documentation didn't work for me, but this guy's did. I hope this helps someone!
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."
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 have a gulp workflow with a simple less task like so:
gulp.task('less', function() {
gulp.src(source_less)
.pipe(sourcemaps.init())
.pipe(less({
sourceMap: true
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dest_less));
});
I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file.
But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file.
Instead, it displays something like this:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
I dramatically simplified my gulpfile, removing livereload, autoprefixer and such.
But even in this stripped down version I can't get the source URL to be right.
Been over this thing for quite some time now, any help would be very much appreciated!
You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:
{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}
Try it yourself here: https://www.base64decode.org/
For those who stumble upon this post and are wondering how to get a separate file for the map that's is not in base64 format - you can pass a path relative to the destination.
For example:
.pipe(sourcemaps.write('./'))
I am trying to run the following grunt command grunt test:e2e but this does not seem to work as I get the warning as pointed in the title. I don't want to post the entire gruntfile.js so I have supplied the gist link. I would really appreciate if someone can point me in the right direction.
Gruntfile.js
The error should be your clue here; there are no task targets named "livereload-start". If you want to point to a specific task config given this structure:
connect: {
target1: {
// opts
},
target2: {
// opts
}
}
You would run connect:target1 instead of connect-target1. If you remove livereload-start out of your task configuration (line 379), what happens?