I'm not getting output for 640 and 1024. Can anyone point out the problem in my code
module.exports = function(grunt) {
grunt.initConfig({
responsive_images: {
myTask: {
options: {
sizes: [{
width: 320
},{
width: 640
},{
width: 1024
}]
},
files: [{
expand: true,
src: ['*.jpg'],
cwd: 'original images/' ,
custom_dest: 'Responsive Images/'
}]
}
},
});
grunt.loadNpmTasks('grunt-responsive-images');
grunt.registerTask('default',['responsive_images']);
};
When I run "grunt" I get this
output . I can't figure it out what wrong I've typed. No error is shown. But still I'm getting only one width i.e "320".
Well I found the solution itself. It should be "dest" instead of "cust_dest".
Related
I want to use trimage image compressor to compress images for my website . What do I need to provide to the engine option in my grunt responsive images task so that it can use trimage?
I have tried this on windows using image-magick with the engine:"im" in my grunt responsive images task and it works well, switching to ubuntu, I have installed trimage image compressor and set the engine:"trimage" but it generates an error Warning: Invalid render engine specified Use --force to continue.
module.exports = function(grunt) {
require("load-grunt-tasks")(grunt);
grunt.initConfig({
responsive_images: {
dev: {
options: {
engine: "trimage",
sizes: [
{
width: 300,
suffix: "_sm",
quality: 60
},
{
width: 500,
suffix: "_md",
quality: 60
}
]
},
files: [
{
expand: true,
src: ["*.{gif,jpg,png}"],
cwd: "images_src/",
dest: "img/"
}
]
}
}
grunt.registerTask("default",["responsive_images"]);
};
I am developing a WordPress site on a server (not local). I want to refresh the page in my browser whenever I modify a sass file. I've got some grunt tasks listed, but right now I just want it to refresh on any sass modification. Right now, it catches whenever a file is modified, but it does not refresh the page.
Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
options: { livereload: true },
files: ['**/*.scss'],
//tasks: ['criticalcss:front', 'criticalcss:page', 'cssmin', 'postcss'],
}
},
postcss: {
options: {
processors: [
require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes
//require('cssnano')() // minify the result
]
},
dist: {
src: 'style.css',
dest: 'style.css'
}
},
criticalcss: {
front : {
options: {
url: "https://grandeurflooring.ca/grand_dev/",
minify: true,
width: 1500,
height: 900,
outputfile: "critical_css/critical-front.css",
filename: "style.css",
buffer: 800*1024,
ignoreConsole: true
}
},
page : {
options: {
url: "https://grandeurflooring.ca/grand_dev/sample-page/",
minify: true,
width: 1500,
height: 900,
outputfile: "critical_css/critical-page.css",
filename: "style.css",
buffer: 800*1024,
ignoreConsole: true
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'critical_css',
src: ['*.css', '!*.min.css'],
dest: 'critical_css',
ext: '.min.css'
}]
}
}
});
// Load the plugin that provides the "critical" task.
grunt.loadNpmTasks('grunt-criticalcss');
// Load the plugin that provides the "cssmin" task.
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Load the plugin that provides the "watch" task.
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "PostCSS" task.
grunt.loadNpmTasks('grunt-postcss');
// Critical task.
grunt.registerTask('critical', ['criticalcss:front']);
};
In footer.php, before wp_footer(), I put the script:
<script src="http://localhost:35729/livereload.js"></script>
You can configure Grunt to watch the compiled css file in your dist directory, which would be updated every time the Sass is recompiled.
Here is my watch configuration which is achieving what you want:
watch: {
options: {
livereload: true,
},
html: {
files: ['index.html'],
},
js: {
files: ['js/**/*.js'],
tasks: ['jshint'],
},
sass: {
options: {
livereload: false
},
files: ['css/scss/**/*.scss'],
tasks: ['sass'],
},
css: {
files: ['dist/css/master.css'],
tasks: []
}
}
You might need to change spawn: false to spawn: true depending on your setup as well.
EDIT: Additionally, you can use the grunt-contrib-watch plugin which allows you to:
Run predefined tasks whenever watched file patterns are added, changed or deleted
This plugin contains numerous additional options for live-reloading, watching, etc. which you may find useful.
I have installed the Graphicmagik and created the following Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
responsive_images: {
dev: {
options: {
engine: 'gm',
sizes: [{width: 320, name: 'small'},
{width: 640, name: 'medium'},
{width: 800, name: 'large' }
]
}
},
/*
You don't need to change this part if you don't change
the directory structure.
*/
files: [{
expand: true,
src: ['**/*.jpg'],
cwd: 'images_src/',
dest: 'images/'
}]
},
/* Clear out the images directory if it exists */
clean: {
dev: {
src: ['images'],
},
},
/* Generate the images directory if it is missing */
mkdir: {
dev: {
options: {
create: ['images']
},
},
},
/* Copy the "fixed" images that don't go through processing into the images/directory */
copy: {
dev: {
files: [{
expand: true,
src: 'images_src/fixed/*.{gif,jpg,png}',
dest: 'images/'
}]
},
},
});
grunt.loadNpmTasks('grunt-responsive-images');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-mkdir');
grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);
};
Project folder tree:
project
css
images_src
fixed
node_modules
grunt-contrib-clean
grunt-contrib-copy
grunt-contrib-mkdir
grunt-responsive-images
"other grunt dependencies"
When I $grunt responsive_images, I get the error following error:
Running "responsive_images:dev" (responsive_images) task
>> Unable to compile; no valid source files were found.
>> Unable to compile; no valid source files were found.
>> Unable to compile; no valid source files were found.
Running "responsive_images:files" (responsive_images) task
Fatal error: Unable to read configuration.
Have you specified a target? See: http://gruntjs.com/configuring-tasks
I changed the cwd and src several times but can't make it work! I get that the cwd ('current working directory') is the folder where the images are stored, the src is where I identify the file/file extention that I want to convert. So I think that this setup is correct. But why does it gives this error?
The files are defined outside of the responsive_images:dev target. Move the files block inside the dev target to fix:
responsive_images: {
dev: {
options: {
engine: 'gm',
sizes: [{width: 320, name: 'small'},
{width: 640, name: 'medium'},
{width: 800, name: 'large' }
]
},
files: [{
expand: true,
src: ['**/*.jpg'],
cwd: 'images_src/',
dest: 'images/'
}],
},
},
I'm using Filerev and filerev-replace to create new versions of my CSS and JS files and update the link to the appropriate file version in my HTML document. However I can't seem to get the replace part to work correctly, can someone point me in the right direction.
Current code:
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 8
},
source: {
files: [{
src: [
'html/js/iba.min.js',
'html/css/iba.min.css'
]
}]
}
},
filerev_replace: {
options: {
assets_root: 'tmp/assets/'
},
compiled_assets: {
src: 'html/js/*.{css,js}',
src: 'html/css/*.{css,js}'
},
views: {
options: {
views_root: 'tmp/views/'
},
src: 'html/templates/default_site/layouts.group/html.html'
}
},
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
},