I install bootstrap using bower install bootstrap
I'm using grunt to build my project. I'm trying to add bootstrap and exclude bootstrap.js file.
// Automatically inject Bower components into the app
wiredep: {
options: {
cwd: '<%= yeoman.app %>'
},
app: {
src: ['<%= yeoman.app %>/index.html'],
exclude: ['bower_components/bootstrap/dist/js/bootstrap.js'],
ignorePath: /\.\.\//
}
}
Hower bower_components/bootstrap/dist/js/bootstrap.js is always included.
How can I exclude bootstrap javascript file?
Seems that exclude: ['bootstrap.js'] solves my problem. However this is not very clear documented...
Related
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'm building a site using the Yeoman generator: https://github.com/Thomas-Lebeau/generator-bootstrap-less.
I've installed fancybox using bower by doing the following:
bower install fancybox --save
add the fancybox script include into my usemin build block in index.html
#import "../bower_components/fancybox/source/jquery.fancybox.css"; into my only .less file
finally, copy across the fancybox vendor images using the following config in grunt's copy task.
code:
// Gruntfile.js
...
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.{webp,gif}']
}, {
expand: true,
dot: true,
cwd: '<%= yeoman.app %>/bower_components/fancybox/source',
src: '**/*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/bower_components/fancybox/source'
}]
},
...
(Sorry, don't know why the formatting is glitched there.. https://gist.github.com/ptim/8555923)
This is working for me, but I'd like to take it a step further to get a better understanding of what's going on. It's working simply because I'm replicating the relative path used in app/ when I copy.
What I'd like is to have the bower assets copied in with my other images, and the paths in my html rewritten (as happens with imagemin and usemin, etc)
....
}, {
expand : true,
dot : true,
cwd : '<%= yeoman.app %>/bower_components/fancybox/source',
src : '**/*.{png,jpg,jpeg,gif}',
dest : '<%= yeoman.dist %>/images'
}]
....
How do I achieve that using the conventions of this package?
(I've seen alternate suggestions: How to rewrite urls of images in vendor CSS files using Grunt)
I've tried changing the dest: path, and adding flatten: true
Here's the trail I'm following:
grunt build finishes with copy, rev, usemin,
rev is adding a version number to the fancybox files
usemin is executes usemin:html and rewrites all the image filenames to match the rev'd files
usemin:css then runs, but doesn't list any rewrites, then grunt finishes:
Running "usemin:css" (usemin) task
Processing as CSS - dist/styles/cf3b732a.main.css
Update the CSS with new img filenames
Done, without errors.
Can anyone suggest a tweak for me?
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.
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.