How to resize images to a multiple of their original size using grunt ?
I have a folder with original images within a tree structure
GFX\myDirectoryTree\Files.png
I want it to export resized files to several tree structures
OUTPUT\100\myDirectoryTree\Files.png > 100% size
OUTPUT\50\myDirectoryTree\Files.png > 50% size
OUTPUT\20\myDirectoryTree\Files.png > 20% size
Here's an example of a gruntfile.js task for the grunt-image-resize Node package mentioned by bencripps.
image_resize: {
resize_50: {
options: {
width: '50%',
quality: 1,
overwrite: true
},
files: [{
expand: true,
cwd: 'GFX/myDirectoryTree',
src: ['{,*/}*.{gif,jpeg,jpg,png}'],
dest: 'OUTPUT/50/myDirectoryTree',
}]
},
resize_20: {
options: {
width: '20%',
quality: 1,
overwrite: true
},
files: [{
expand: true,
cwd: 'GFX/myDirectoryTree',
src: ['{,*/}*.{gif,jpeg,jpg,png}'],
dest: 'OUTPUT/20/myDirectoryTree',
}]
}2
},
Related
I'm building a website with Bootstrap using less. I use grunt to automate the tasks.
In my gruntfile.js I have this part:
less: {
compileCore: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
},
compileBrandingStyles: {
options: {
strictMath: true,
sourceMap: false,
outputSourceFiles: false
},
src: 'less/branding/**/*.less',
dest: 'dist/css/<%= what do I put here? %>.css'
}
},
In "compileBrandingStyles" I would like to fetch all *.less files in a folder and compile them into seperate css files with their original file names. No concatenation.
In the folder: less/branding I have x number of .less files:
theme-1.less
theme-2.less
theme-3.less
theme-4.less
I would like to output them in the dist/css/ folder like this:
theme-1.css
theme-2.css
theme-3.css
theme-4.css
So how should I write this part to keep their file names?
dest: 'dist/css/<%= what do I put here? %>.css'
Reconfigure your compileBrandingStyles Target to this instead:
// ...
compileBrandingStyles: {
options: {
strictMath: true,
sourceMap: false,
outputSourceFiles: false
},
files: [{
expand: true,
cwd: 'less/branding/',
src: ['**/*.less'],
dest: 'dist/css/',
ext: '.css'
}]
}
See further info on this in the grunt docs.
EDIT
If you don't' want the sub folders included in the destination folder use flatten.
// ...
compileBrandingStyles: {
options: {
strictMath: true,
sourceMap: false,
outputSourceFiles: false
},
files: [{
expand: true,
cwd: 'less/branding/',
src: ['**/*.less'],
dest: 'dist/css/',
ext: '.css',
flatten: true // <-- Remove all path parts from generated dest paths.
}]
}
The following config works as expected, but when the //build: { stuff is uncommented it either silently fails, or it does something unexpected to me.
babel: {
//build: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: 'build/src/app',
src: ['**/*.js'],
dest: 'build/src/es5-app'
}]
}
//}
},
So, with //build: { commented out, the es5-app directory is created at build/src, but with //build: { uncommented, the directory is not created. In both instances grunt is run as grunt babel, and it returns Done, without errors.
Since grunt-babel is registered as a multi task, dist is actually the name of the target, with files being at the first level of the config. So when you run babel without build, it's actually running babel:dist (which you should see in the log).
For it to work the way you want, you would need something like the following:
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: 'build/src/app',
src: ['**/*.js'],
dest: 'build/src/es5-app'
}]
}
build: {
files: [{
expand: true,
cwd: 'build/src/app/test',
src: ['test/**/*.js'],
dest: 'build/test/es5-app'
}]
}
},
This would allow you to run either babel:dist or babel:build.
See http://gruntjs.com/creating-tasks for more information on multi tasks.
My grunt file looks like this:
grunt.initConfig({
compress: {
foo: {
options: { archive: 'deploy/foo.zip', mode: 'zip' },
files: [{ expand: true, cwd: 'release/foo/', src: ['**'], dot: true }]
},
bar: {
options: { archive: 'deploy/bar.zip', mode: 'zip' },
files: [{ expand: true, cwd: 'release/bar/', src: ['**'], dot: true }]
},
baz: {
options: { archive: 'deploy/baz.zip', mode: 'zip' },
files: [{ expand: true, cwd: 'release/baz/', src: ['**'], dot: true }]
},...
How do i parameterise this, so i don't need N definitions and I can call (pseudocode)
> grunt compress "foo"
If I understand your problem correctly:
var initData = {
compress: { }
};
var compress = function(n){
initData.compress[n] = {
options: {archive: 'deploy/' + n + '.zip', mode: 'zip'},
files: [{expand: true, cwd: 'release/' + n + '/', src: ['**'], dot: true}]
};
}
compress('foo');
compress('bar');
compress('baz');
grunt.initConfig(initData);
My question is about Assemble 0.4
I have an input file with the name "main.js.md.hbs"
I need to get "main.js.html" as output name.
How to do this?
I have a Grunt task like this:
assemble: {
options: {
assets: '<%= config.dest %>/assets',
flatten: true,
layoutdir: 'templates/layouts',
layout: 'base.hbs',
data: 'data/metadata/*.{json,yml}',
partials: 'templates/partials/*.hbs'
},
docs: {
options: {
layout: 'markdown_doc.hbs'
},
files: [{
expand: true,
cwd: 'content',
src: ['**/*.hbs'],
dest: 'dist/',
ext: '.html'
}]
}
}
With the provided config Assemble generates "main.html" (cuts off ".js" part).
I believe the problem is in your files specification. In src, you are globbing all .hbs files, then you specify the extension as .html for all. One solution that covers the main.js.md.hbs example would be to use two different file specifications with different extensions to separate out the *.js.md.hbs -> *.js.html case:
assemble: {
options: {
assets: '<%= config.dest %>/assets',
flatten: true,
layoutdir: 'templates/layouts',
layout: 'base.hbs',
data: 'data/metadata/*.{json,yml}',
partials: 'templates/partials/*.hbs'
},
docs: {
options: {
layout: 'markdown_doc.hbs'
},
files: [
{
expand: true,
cwd: 'content',
src: ['**/*.js.md.hbs'],
dest: 'dist/',
ext: '.js.html'
},
{
expand: true,
cwd: 'content',
src: ['**/*.hbs', '!*.js.md.hbs'],
dest: 'dist/',
ext: '.html'
}
]
}
}
I'm sure this is not the elegant long-term solution, but I don't know exactly what glob patterns you need. I found the following related question helpful, which also pointed out the documentation for Grunt File Globbing Patterns.
Grunt expand files, what patterns are acceptable in src?
I am using grunt-contrib-uglify plugin in my grunt 0.4.
I have the following task:
uglify: {
dist: {
options: {
sourceMap: 'dist/sm/sm.js'
},
files: grunt.file.expandMapping(['*.js'], 'dist/js', {
cwd: 'dist/js'
})
}
},
As you can see, uglify is configured to compress multiple files, and there is only one source-map specified. (I am not able to figure out a way to specify multiple sourcemap outputs).
Also, uglify is overwriting the soucemap after compressing each js file.
How do I configure this plugin to output the complete source-maps for all my js files?
You can set functtion at sourceMap.
uglify: {
options: {
sourceMap: function(path) { return path.replace(/.js/,".map")}
},
.....
In the V0.4.0 version, sourceMap is Boolean value. Use dynamic build to produce multiple sourceMap with multiple .min.js files.
uglify: {
options: {
sourceMap: true
},
build: {
files: [{
expand: true,
cwd: 'src/',
src: '*.js',
dest: 'build/',
ext: '.min.js',
extDot: 'first'
}]
}
}
options: {
beautify: false,
banner: 'lorem ipsum',
mangle: false,
sourceMap: true,
compress: {
conditionals: true,
booleans: true,
unused: true,
sequences: true,
dead_code: true,
if_return: true,
join_vars: true,
drop_console: true
}
},
min: {
files: [{
expand: true,
cwd: '<%= config.destination.js %>',
src: ['**/*.js', '!**/*.min.js'],
dest: '<%= config.destination.js %>',
ext: '.min.js'
}]
}