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
Related
I have a Yeoman project scaffolded with 'webapp-generator' which contains a static website with nested HTML files, resembling this structure:
-root/
index.html
-directory/
file1.html
-directory2/
file2.html
-js/
(revved .js files)
-css
(revved .css files)
I'm using usemin and filerev tasks to update the filerevved file paths on the .html documents. It updates all file names correctly on js/css/images and it works correctly on the root index.html.
However, on the nested HTML files, it doesn't replace the reference to the correct nested path.
For example.
js/scripts.js gets renamed to js/827385.scripts.js
In index.html
<scripts src="js/scripts.js"></scripts>
resolves to: <scripts src="js/827385.scripts.js"></scripts>
But in directory/file1.html (or any other nested html file)
<scripts src="../js/scripts.js"></scripts>
gets also converted to: <scripts src="js/827385.scripts.js"></scripts>
Ignoring the ../ relative path
Is there any way to tweak the Grunt tasks to be aware of the relative depth of the file within the directories to keep the relative indicator ../ in the renamed path?.
Below is the code snippet for the relevant Grunt tasks.
PS: I have already followed some of the possible answers in this Stack Overflow question: How should I configure grunt-usemin to work with relative path to no avail.
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,**/}*.js',
'<%= config.dist %>/styles/{,**/}*.css',
'<%= config.dist %>/images/{,**/}*.*',
'<%= config.dist %>/styles/fonts/{,**/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
// <%= config.dist %>
useminPrepare: {
options: {
dest: 'out',
// root: '<%= config.app %>'
},
html: '<%= config.app %>/index.html'
// root: '<%= config.app %>'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/**/*.html'],
css: ['<%= config.dist %>/styles/**/*.css']
},
In my case I've found out that the problem was usemin configuration in the html files:
If you have in your index.html this usemin directive:
<!-- build:js styles/jquery.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->
In directory/file1.html you should try to use a full path in it:
<!-- build:js /scripts/jquery.js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild-->
which will be converted to something like <script src="/scripts/jquery.34ad31c3.js"></script>.
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!
anyone experienced issues while distributing a project with grunt including font awesome?
My problem is that on the final distribution project inside "dist" folder i miss font-awesome...
Font-Awesome folder in my project is located in:
app/lib/font-awesome/css/font-awesome.min.css
What i've done so far:
i tried to edit copy.js (in grunt folder) like this:
src: [
'**/**.{ico,png,gif,txt,jpg,svg,wof,ttf}',
'.htaccess',
//'images/{,*/}*.webp',
//'content/{*.*,*/}*.*',
'content/{,*/}/{,*/}/*.*',
// '{,*/}*.html',
'styles/fonts/{*.*,*/}*.*',
'lib/famous/**/**.css',
'lib/font-awesome/{,*/}/**.css'
]
..to distribute font-awesome too and now it is in the dist folder but when i open index.html it just can't seem to find the correct path and i see no icon.
Thanks
To simplify everything and speed up loading, you could just link to a CDN hosted version of Font Awesome. BootstrapCDN will serve it for you: http://www.bootstrapcdn.com/#fontawesome_tab
Given that you've got this in index.html:
<!-- build:css(app/) css/app.css -->
<link rel="stylesheet" type="text/css" href="content/vendor/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="styles/app.css" />
<!-- bower:css -->
Grunt will place the font awesome css in dist/css. The problem is that font-awesome is looking for fonts relative to this file (../fonts), and the fonts did not move along with the css during the build process. So, alter your grunt/copy.js file to do this for you:
// Copies remaining files to places other tasks can use
module.exports = {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'**/**.{ico,png,txt,jpg,svg,wof,ttf}',
'.htaccess',
'images/{,*/}*.webp',
// '{,*/}*.html',
'styles/fonts/{,*/}*.*',
'lib/famous/**/**.css'
]
},
// add this, making sure the path is correct to your fonts
{
expand: true,
dot: true,
cwd: '<%= config.app %>/content/vendor/font-awesome/fonts/',
src: ['*.*'],
dest: '<%= config.dist %>/fonts'
}]
}
};
run grunt again, and the dist folder should now contain a fonts folder.
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?
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.