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!
Related
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...
I want to build my own compiled css file
using the source Less bootstrap files
In my project I'm using the mean.io stack.
how to integrate less in a mean stack ?
I found just a lot of tools out there
like
https://www.npmjs.org/package/grunt-bootstrap
https://github.com/sindresorhus/grunt-recess
https://github.com/gruntjs/grunt-contrib-less
so I'm a little confused ^^
I'm also pleased with some tutorial
UPDATE
I ended up using grunt-contrib-less
copy by hand the file
/less/bootstrap.less
/less/variables.less
in my src folder ie
src/less
than in my grunt file
less: {
bootstrap: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: '<%= distdir %>/css/<%= pkg.name %>.css.map'
},
files: {
'<%= distdir %>/css/<%= pkg.name %>.css': '<%= src.src %>/less/bootstrap.less'
}
}
}
and in my variables.less I can do
//** Background color for `<body>`.
#body-bg: #F70E29;
//** Global text color on `<body>`.
#text-color: #F70E29;
and I've got the coolest bg body colors ever :)
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?
Hell
I do not know how i can change my path using grunt tasks. I need to change my path for all files (css, js, images etc). I do not found any example how to do it ?
For example now grunt create something like that :
<script src="scripts/d41d8cd9.plugins.js"></script>
And i need something like that :
<script src="myapp/scripts/d41d8cd9.plugins.js"></script>
So i need to do it for dist , and for all path
OK. Think you need to update your rev configuration then.
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/myapp/scripts/{,*/}*.js',
'<%= yeoman.dist %>/myapp/styles/{,*/}*.css',
'<%= yeoman.dist %>/myapp/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/myapp/styles/fonts/*'
]
}
}
}
As of now there is no such grunt plugin exist, However I believe you can achieve the same by using grunt-string-replace plugin,
I am planning to work on similar plugin, which would make this task trivial
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.