My question is how to include font-awesome in my Grunt project?
The part of my Gruntfile that seems related is:
compass: {
options: {
sassDir: '/styles',
cssDir: '.tmp/styles',
imagesDir: '/images',
javascriptsDir: '/scripts',
fontsDir: '/styles/fonts',
importPath: '/bower_components',
relativeAssets: true
},
dist: {},
server: {
options: {
debugInfo: true
}
}
},
PS I saw: Yeoman, How to reference a bower package (font-awesome)? --> They talk about copying, but don't show Grunt code.
PPS There is also Why does Yeoman build without /styles/fonts? - but it does not show how to work with fonts from font-awesome (coming from Bower)
You will use grunt-contrib-copy to copy the icon libraries.
First you need to load grunt-contrib-copy with:
grunt.loadNpmTasks('grunt-contrib-copy');
After, you will create the task with something like this:
grunt.initConfig({
// ...
copy: {
libraries: {
files: [
{
expand: true,
cwd: 'bower_components/fontawesome/fonts/',
src: ['**/*'],
dest: 'public/fonts/'
}
]
}
}
// ...
});
At the end, you need to call this on the default task, if you use one:
grunt.registerTask('default', ['copy:libraries']);
The answer here is #font-face.
This helped a lot: entypo
Also, pictos.cc and fontsquirrel provide hints towards using #font-face.
Related
We are trying to compile our sass files to css files, however we want to compile each individual sass file into an individual css file (one-to-one).
For example our product_view.scss should have a product_view.css.
However all configurations we have tried create one css file for everything called styles.css in our "out/css" folder.
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: '<%= pkg.src %>/assets/sass',
src: ['*.scss'],
dest: '<%= pkg.src %>/assets/media/out/css',
ext: '.css'
}]
},
},
I use grunt-contrib-compass (Compass) to compile my SASS, which has some nice extras. For example, compass includes a reset utility you can use by using
#import 'compass/reset';
But disregarding that, compass also outputs every file individually (as long as it does not start with _ which are files that can be included but won't be compiled by themselves). Here is the setup I use in my gruntfile:
compass: {
'default': {
options: {
sassDir: "css/sass/",
cssDir: "css/",
outputStyle: "compressed"
}
}
}
New to Grunt, and have been using it for the first time to combine/minify JS files for a project.
Currently have this (relevant section) in Gruntfile.js:
concat:
{
options:
{
banner: '<%= banner %>',
stripBanners: true
},
dist:
{
src:
[
'build/js/sample_file',
'build/js/another_file.js'
],
dest: 'dist/<%= pkg.build_name %>-<%= pkg.version %>.js'
}
},
uglify:
{
options:
{
banner: '<%= banner %>'
},
dist:
{
src: '<%= concat.dist.dest %>',
dest: 'dist/<%= pkg.build_name %>-<%= pkg.version %>.min.js'
}
},
That's working fine, but I'm not sure how to do the next thing I need. My project requires Hammer.js.
I could just include the library in the concat, but this doesn't seem right to me for 2 reasons. It's already minified (I could get un-minified, but seems a bit of a waste of time when minified already), and it would seem Grunt would be a bit cleverer than this, and could be used to download the latest Hammer library for me?
How do I get Grunt to include a third-party JS library in the uglified code it builds?
use bower for your dependency-management of vendor libraries
use grunt for linting, testing, building
it's not possible to tell you on how to combine these two, as your question is to unspecific.
in general i would use yeoman and some generator to get my project setup. if none of them satisfies your needs, try to learn from them!
I installed AngularJS via Yeoman scaffolding. When I run
grunt bower-install
It reflexes in the HTML only the dependencies that are in bower.json under the "dependencies" section.
How can I make it include the deps under the "devDependencies" section?
As stated in Angular changelog, bower-install is deprecated in version 9.0.0 see here, now the bower-install task is deprecated and it should be replaced with wiredep.
Edit Gruntfile.js file with this:
wiredep: {
options: {
cwd: '<%= yeoman.app %>'
},
dev: {
devDependencies: true,
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
And now install DevDependencies with
grunt wiredep:dev
Apparently I need 50 reputation to comment on the accepted answer so I will have to add here, for anyone in the future that comes across this thread, the changes in accepted answer worked for me but I had to change one other line further down in gruntfile.js
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
...
grunt.task.run([
'clean:server',
'wiredep:dev', <-- Changed this from plain 'wiredep'
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
If you scaffolded out the Yeoman generator correctly (check for errors in your log), then the dependencies should all have been installed, including those listed under "devDependencies". Failing that please delete your whole bower_componentsfolder, make sure there are no syntax errors in your bower.json and just run
bower install
in your root directory. This will install everything.
I am using yeoman webapp to scaffold a basic application. I use bower install --save to install a couple of libraries which make their way into bower_components folder. Now I run grunt build and to my surprise the index.html file in the dist folder refers to the bower_components folder for the js files. I had expected the build process to automatically concatenate these files and put the concatenated script in the dist folder and make the index.html file refer to this concatenated file. What should I do to make this happen by default.
Just facing the same issue on one of my project, a warning because of a bad file targeter was stopping the grunt build, and since the usemin task is the last to be run, my scripts was perfectly concatenated and minified, but the references in my html was not updated.
If you have like me an error, try to fix it or to run a grunt build --force to pass it.
If no, check that your scripts are correctly surrounded by the build tags
<!-- build:js({.tmp,app}) scripts/vendor.js -->
...
<!-- endbuild -->
And that you have correctly configure your rev, useminPrepare and usemin tasks
Little exemple :
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/scripts/{,*/}*.js',
'<%= yeoman.dist %>/public/styles/{,*/}*.css'
]
}
}
},
useminPrepare: {
html: '<%= yeoman.app %>/views/index.html',
options: {
dest: '<%= yeoman.dist %>/public'
}
},
usemin: {
html: '<%= yeoman.dist %>/views/{,*/}*.html',,
css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>/public']
}
},
Also ensure that your build task is referencing to them :
grunt.registerTask('build', [
'clean:dist',
'bower-install',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
I just downloaded a fresh copy of yeoman. When I build using grunt, I see that all my images have been converted and their file names have been renamed.
However, the references in the html file do not reference the new names.
Any idea why?
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/img',
src: '{,*/}*.{png,jpg,jpeg}',
dest: '<%= yeoman.dist %>/img'
}]
}
},
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
ngapp/views/main.html
Renaming is done by the grunt-filerev task in your Gruntfile. The usemin task takes care of updating the references to those renamed files for scripts, stylesheets and images, but doesn't support inline styles. You should either move the background-image reference within a stylesheet or disable the rev task.
The problem is probably that your url for the image in your HTML file is a relative path and and usemin can't resolve the new path of the image to your url. See #eddiemonge comment on github for a better explanation: https://github.com/yeoman/grunt-usemin/issues/108
I had the same problem and fixed it by using a fixed path (/img/demo/red-green.png, in your case) which works fine as long as your distribution directory uses /img and img is also off the root of your app when doing development.