I am writing grunt-contrib-copy task to copy from source to dest. But no files are copied. Even there are no errors. I am not able to understand what is happening.
copy:{
index: {
files: [
{
src: '<%= devDir %>/index.html',
dest: '<%= buildDir %>/index.html',
expand: true,
flatten: true,
}
]
}
}
<%= devDir %> is defined to correct folder and <%= buildDir %> is also defined.
Any help?
If you are giving wrong source path. Then grunt-contrib-copy will just return without error.
Always the path is reference from node-module where these grunt utils are installed.
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 am attempting to use the grunt-contrib-less grunt task to compile my less files to css. What I would like to do is compile them inline, so that each .less file creates a single .css file.
Workflow:
1) Initial file system:
someFolder2
joe.less
rachel.less
someSubFolderA
jake.less
bob.less
someFolder4
someSubFolderB
ally.less
2) run grunt less
3) File system:
someFolder2
joe.less
rachel.less
joe.css
rachel.css
someSubFolderA
jake.less
bob.less
jake.css
bob.css
someFolder4
someSubFolderB
ally.less
ally.css
I have played around with various options but I can't figure out how to do this. Any suggestions would be greatly appreciated. This is the starting point grunt task I have been using:
less: {
paths: [
"src/someFolder2/**/*.less",
"src/someFolder4/**/*.less"
],
options: {
// outputSourceFiles: true
// compress: true,
// sourceMap: true,
// sourceMapFilename: "jake.txt"
// outputSourceFiles: true
}
}
This will (I think) concat all of the less files into a single CSS file.
You have to define task for grunt
options: {
paths: ["<%= cfg.dist %>/src/less"],
sourceMap: true,
rootpath: "<%= cfg.dist %>/",
relativeUrls: false,
cleancss: false
},
test: {
files: [
{
expand: true,
cwd: '<%= cfg.dist %>/src/less/',
src: ['*.less'],
dest: '<%= cfg.dist %>/build/css/',
ext: '.css'
}
]
}
/src/less/ - location of your less files
/build/css/ - folder where css will be generated
I have the following directory structure:
--development
-js
-pages
--js
-pages
I'm trying to take all files in development/js/pages and output them js/pages and minify them using grunt uglify but still keep seperate files - I don't want to combine all the files together. I've tried the following:
build: {
src: 'development/js/pages/*.js',
dest: 'js/page',
options: {
sourceMap: true,
compress: true,
mangle: true
}
}
but this gives me an error: unable to write js/page file
Then I tried this, which is on the uglify documentation:
build : {
files: [{
cwd: 'development/js/pages',
src: '*.js',
dest: 'js/page'
}],
options : {
sourceMap: true,
compress: true,
mangle: true
}
}
but this just gives me this error for each file in development/js/pages:
source File "filename.js" not found
and then another error saying Destination (js/page) not written because the source files are empty.
Any ideas why?
For anyone else looking the second option above almost worked but I needed to remove the options block and include expand in the files block:
pages: {
files: [{
expand: true,
cwd: 'development/js/page',
src: '*.js',
dest: 'js/page/',
ext : '.min.js',
}]
}
I wanted to answer with another option.
Here is how I write my Uglify Grunt task incase you want to keep your options. It's setup to read as (dest : src), I also concat all my library files in task prior to Uglify.
-
uglify: {
options: {
// the banner is inserted at the top of the output
banner: '/* \n Site: <%= pkg.name %> \n Version: <%= pkg.version %> \n Build Date: <%= grunt.template.today("mm-dd-yyyy") %> \n */\n \n'
},
site: {
files: {
'./_build/js/lib/lib.min.js': ['<%= concat.site.dest %>'],
'./_build/js/app/app.min.js': ['./_build/js/app/app.js']
}
}
},
I'm trying to use grunt-contrib-imagemin to recursively process a directory of images. Config looks like this:
imagemin: {
mytarget: {
options: {
optimizationLevel: 7
},
files: [{
expand: true,
cwd: '../../uploads',
src: '{,*/}*.{png,jpg,jpeg}',
dest: '.tmp/uploads'
}]
}
}
In this form it only processes one sub-directory of the 'uploads' folder. I can't see what I'm doing wrong, can anyone spot my dumb mistake?
Thanks,
Toby
Have you tried src: '**/*.{png,jpg,jpeg}', instead of src: '{,*/}*.{png,jpg,jpeg}',?
Please see here for more details.
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?