I've tried to configure uncss using grunt
I've installed
npm install grunt-uncss --save-dev
npm install grunt-processhtml --save-dev
Configuration
uncss: {
dist: {
files: { 'dist/css/clean.css': ['index.php'] }
}
}
at the end I load them in and register a default task like this :
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss', 'processhtml']);
Result
When I run grunt
at the end I keep seeing :
Running "uncss:dist" (uncss) task
Fatal error: PhantomJS: Cannot open about:blank
Update
I added :
processhtml: {
dist: {
files: {
'index.php': ['index.php']
}
}
}
Still get the same error after running grunt
If this is all of your code, you are not referencing any stylesheets to remove code from. All you are doing is telling grunt where the cleaner file should go, and to remove any unused css from index.php. However, it doesn't know where the styles for index.php live, so it has nothing to do... You need to actually configure your processhtml and tell uncss which stylesheets you would like to clean up.
Read the directions friend:
grunt-uncss github readme.md
I have that problem with my project and the solution is here:
You need update the uncss module, remember grunt-uncss is only a way to use uncss node package. In my case my version of that was in 0.12.1 and updating that package the problem was fixed. Let me know if this help you.
Related
I’m using grunt to develop a website, and was wondering if it’s possible to update bower dependencies in my project within my 'build' grunt task—so that when I build a production version of my project, everything is up–to–date?
Obviously, I know I could just execute bower update before grunt build:prod, but it would be one less step every time.
Just curious!
Grunt has this task called grunt-bower-task which can help you manage bower dependencies. Use the official grunt documentation to go through the details.
Found one possible solution:
I guess I could use grunt-shell to automate running the bower update command in a shell…
Just wondering if this is the most logical/sophisticated way of doing it. Any other suggestions?
Found a good solution—I’ll post it in case it’s of use to someone…
The grunt-bower-install-simple plugin allows you to update bower dependencies from a grunt task by setting the command option to update like so:
"bower-install-simple": {
options: {
color: true,
directory: "src/bower_components"
}
"prod": {
options: {
command: update,
production: true
}
}
I'm trying to deploy my Yeoman's Angular app to my production server.
When I try to run the grunt build command I get this error:
Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/usr/share/nginx/html/data/gaia-app/app/bower.json' Use --force to continue.
If I use grunt --force my app is broken...
I'm on Ubuntu 14.04
Any ideas?
There are two solutions to this issue depending on which version of wiredep you want to use.
If you want to use '^1.9.0', make sure to remove the cwd property from your Gruntfile.js. This is a common issue if you are an angular-generator user which currently specifies a cwd property on the config for the wiredep task.
If you don't mind using '1.8.0', make sure to pin that version in your package.json. If you are including wiredep via grunt-wiredep, then you will have to add wiredep manually and pin it. In the case that you stick with '1.8.0', leave the cwd property in the config for the task.
Nice after quite some searching on google joshs solution fixed my problem. I just removed <%= yeoman.app %>
wiredep: {
options: { */code was here */ }
}
The solution is to delete the cwd property from the Grunfile.js
See this for reference:
https://github.com/stephenplusplus/grunt-wiredep/issues/100
This answer I found from Melmoth:
Grunt wiredep:app Cannot find Bower packages
Plus commenting out line 166 in gruntfile.js :
// cwd: '<%= yeoman.app %>'
fixed the issue for me.
Adding detail as per request
I am doing the Yeoman 1 hour codelab http://yeoman.io/codelab.html
After installation I ran grunt serve and got an error: Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '../charlottesFolder/app/bower.json'
I tried moving:
charlottesFolder/bower.json to charlotteFolder/app/bower.json (don't actually do this as it was wrong)
which then threw the error: Running "wiredep:app" (wiredep) task
Cannot find where you keep your Bower packages.
This led me to Melmoth's answer for Cannot find Bower packages - his solution worked in conjunction with commenting out the cwd line (currently line 166) in Gruntfile.js.
You has to set the grunt-wiredep dependency to the fix version.
"grunt-wiredep": "1.8.0",
I'm using Bower, and already installed Font Awesome with it, but now I'm wondering if I can install a custom font (to be more specific: Raleway and Montserrat) using Bower. Can I do that?
I did some research but I didn't find any solution! If it is possible, please tell me how.
The best solution I found with Bower was the Google Fonts Bower Proxy (source on Github). You will have to first get the query string by going to Google fonts.
<link href='http://fonts.googleapis.com/css**?family=fontname:size**' rel='stylesheet' type='text/css'>
Then using Bower:
bower install --save https://google-fonts.azurewebsites.net/googleFonts/yourPackageName?family=fontname:size
Depending on the requirement, it may be actually easier to simply import the font to your CSS or SASS instead of going for the bower based solution.
There is also a google fonts bower package which includes all fonts.
Raleway is included in the bower package TypoPRO.
Install it with
bower install --save typopro
As you are new to bower, here some further tips:
As the bower_components directory is usually excluded from version control, you can copy the files you need to another directory with a grunt task.
Add a exportsOverride section to bower.json:
{
(…)
"dependencies": {
"typopro": …
},
"exportsOverride": {
"typopro": {
"fonts": "web/TypoPRO-Raleway/*"
}
}
(…)
}
Install grunt
$ npm install -g grunt-cli
$ npm install --save-dev grunt
$ npm install --save-dev grunt-bower-task
and create Gruntfile.js:
module.exports = function(grunt) {
var path = require('path');
grunt.initConfig({
bower: {
install: {
options: {
targetDir: 'vendor',
cleanTargetDir: true,
layout: function(type, component, source) {
return type;
}
}
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-bower-task');
// Default task.
grunt.registerTask('default', ['bower:install']);
};
The grunt task bower:install will run bower install and copy all files from web/TypoPRO-Raleway to vendor/fonts (vendor from targetDir in Gruntfile.js and fonts from exportsOverride in bower.json). You can execute the task with
$ grunt bower:install
As bower:install is registered as a default task, you can also use the short cut:
$ grunt
What you could do, instead of managing it with bower, is add in google code directly into your CSS or SCSS #import url(http://fonts.googleapis.com/css?family=Raleway) or manually add the font by first downloading the font then adding the relative path into your css.
You can download raleway here http://www.google.com/fonts#UsePlace:use/Collection:Raleway, clicking on the down arrow on the top right of the page, unzipping and add the fonts to your site.
Another solution would be to use grunt instead of bower to manage your fonts. I found two grunt plugins which download fonts from Google for you.
grunt-local-googlefont and grunt-goog-webfont-dl. You can install them via npm.
There are lots of different plugins to download fonts from other sources. Just search for font at grunt's plugin search.
I'm using grunt + bower + grunt-bower-task plugin to manage javascript library dependencies.
Say I have installed jquery with bower:
bower install jquery --save
and with grunt-bower-task:
bower: {
install: {
options: {
targetDir: './public/lib',
layout: 'byComponent',
install: true,
verbose: true,
cleanTargetDir: true,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
After running grunt bower, jquery will be copied to:
/public/lib/jquery/jquery.js
So the client will fetch jquery with url:
http://somedomain.com/public/lib/jquery/jquery.js
But I have question, what if I changed the jquery version?
Say I used another query version with bower, but it will still be copied to the same location and user will fetch it with the same url. If I have add cache-headers for it, user won't fetch new jquery.js code from server before expired.
How to fix this problem?
I think if we can add the version to the file name when running grunt bower, that will fix it, e.g.
http://somedomain.com/public/lib/jquery/jquery-1.8.js
But I can't find such functions in grunt-bower-task.
I would handle library versioning in the bower.json file. Yours should have the versions to be installed whenever you call the bower install command.. something like this
"dependencies": {
"angular": "~1.2.21",
"jquery": ">=2.1.1"
},
"resolutions": {
"jquery": ">=2.1.1"
}
But now they're all jquery.js regardless of the version. So now what you'd want to do is add some type of cache busting strategy which will force the browser to download the newest version of your scripts. There's tons of resource on cache busting javascript online, so I won't reiterate those here, but there are grunt tasks that can help you like this one
One slightly off topic suggestion I would make is to concat and minify your externals scripts into one js file and maybe another for your application scripts. As one or more of your external library change, the cache busting technique will force the browser to grab the latest version of your dependent scripts.
I'm trying to setup gruntJS on my local machine. These are the steps I have already done:
Install nodeJS
Download gruntJS in a root folder of project with command:
npm install -g grunt-cli
Download grunt also in a root folder of project with:
npm install grunt
Also, I have created Gruntfile.js and here is content of it:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min: {
css: {
src: 'templates/folder1/css/*.css',
dest: 'app.min.css'
}
},
});
};
And I was expected how this will work and minimize all css files and move it to the root ( because destination specified as root ).
I need to say how I was follow this tutorial:
https://www.youtube.com/watch?v=q3Sqljpr-Vc
And I really don't know what I do wrong.
Here is how I call grunt and error ( its better to say warning message ) which I get:
C:\wamp\www\myProject>grunt min
Warning: Task "min" not found. Use --force to continue.
Aborted due to warnings.
you need to install some tasks for use. From your example i would guess you are trying to minify some CSS?
For that i would use the grunt-contrib-cssmin task. To use first install using
npm install grunt-contrib-cssmin
you will also need to register the task at the bottom of your gruntfile like this grunt.loadNpmTasks('grunt-contrib-cssmin').
then your gruntfile will look like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
cssmin: {
minify: {
src: ['templates/folder1/css/*.css'],
dest: 'app.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('min' ['cssmin']);
};
For more info i recommend you read the documentation and familiarise yourself with the examples at http://gruntjs.com/sample-gruntfile