I'm using imagemin with Grunt and it works as expected with PNGs/JPGs, but not with SVGs.
When I add an SVG into my project, Grunt says:
>> File "../public/microsite/src/img/Sketch.svg" added.
Running "imagemin:dynamic" (imagemin) task
Minified 0 images (saved 0 B)
Is this simply because it can't optimise them any further, or because it's not trying to at all? Even if an SVG can't be optimised, which I doubt is the case, I'd still like it imagemin to place it in the dist folder.
This is my config:
imagemin: {
dynamic: {
options: {
optimizationLevel: 3,
svgoPlugins: [{ removeViewBox: false }]
},
files: [{
expand: true,
cwd: '../public/microsite/src/img/',
src: ['*.{png, jpg, svg}'],
dest: '../public/microsite/build/img/'
}]
}
}
I figured out the spaces in the src object were invalid. I removed them, which allowed all image files to be minified. src: ['*.*'] also works.
Related
We are trying to compile our sass files to css files, however we want to compile each individual sass file into an individual css file (one-to-one).
For example our product_view.scss should have a product_view.css.
However all configurations we have tried create one css file for everything called styles.css in our "out/css" folder.
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: '<%= pkg.src %>/assets/sass',
src: ['*.scss'],
dest: '<%= pkg.src %>/assets/media/out/css',
ext: '.css'
}]
},
},
I use grunt-contrib-compass (Compass) to compile my SASS, which has some nice extras. For example, compass includes a reset utility you can use by using
#import 'compass/reset';
But disregarding that, compass also outputs every file individually (as long as it does not start with _ which are files that can be included but won't be compiled by themselves). Here is the setup I use in my gruntfile:
compass: {
'default': {
options: {
sassDir: "css/sass/",
cssDir: "css/",
outputStyle: "compressed"
}
}
}
I have a branding application where I would like to have this output:
/branding/
/default/
default.css
/brand1/
brand1.css
/brand2/
brand2.css
This one should be output from a branding folder with same structure but with .less files
So I would like to do something like this:
less: {
production: {
options: {
},
files: {
'dist/branding/**/*.css': 'branding/**/*.less'
}
}
}
I just seen examples on this where they all go to same folder, but I want to keep this dynamic because in my case there is like a ton of brandings, and the branding folders have more than just a css file, they also have other artifacts like images and so on.
Any suggestions?
If I understand you correctly you want LESS files under branding compiled to a dist/branding folder and to keep the folder structure.
To do that you would do something like this:
files: [
{
expand: true, // Recursive
cwd: "branding", // The startup directory
src: ["**/*.less"], // Source files
dest: "dist/branding", // Destination
ext: ".css" // File extension
}
]
You can visit http://rajdeepdeb.me/less-to-css-grunt-for-multiple-files/
Add the following configuration in your grunt file
...rest of the grunt configuration,
files: [{
expand: true,
cwd: '/',
src: ['**/*.less'],
dest: '/',
ext: '.css',
extDot: 'last'
}],
... rest of the grunt configuration
I have the following snippet in my Gruntfile.js:
imagemin: {
options: {
optimizationLevel: 7,
cache: false
},
dist: {
files: [{
expand: true,
cwd: 'Assets/img/',
src: ['**/*.{png,jpg,gif}', '!optimised/*.*'],
dest: 'Assets/img/optimised/'
}]
}
}
When I run grunt imagemin the files in /optimised get optimised again, what's the correct pattern to make sure I exclude whatever files I have in my 'optimised' folder?
I've tried the globbing pattern ! that's used to negate a match but can't make it work.
Just found the answer, maybe this might help someone else as I couldn't find anything like it on SO.
src: ['**/*.{png,jpg,gif}', '!optimised/**']
More about globbing patterns: http://gruntjs.com/configuring-tasks#globbing-patterns
The Context
I'm new to Grunt and am trying to learn a bit by modifying the meanjs boilerplate to support stylus, I would like to keep my precompiled css assets organized in modular buckets, as recommended by the current meanjs defaults.
The Question
I have the following file structure:
- app
- config
- public
- modules
- foo
- assets
- stylesheets
...
- css
...
...
How can I use Grunt to take Stylus .styl files in the public/modules/*/assets/stylesheets directory, and have them compile to the public/modules/*/css directory?
Naive Attempt:
Below is an example attempt, which didn't get very far.
stylus: {
compile: {
files: [{
dest: '../../css',
src: 'public/modules/*/assets/stylesheets/*.styl',
ext: '.css',
expand: true
}]
}
}
This results in: File ../../css/public/modules/foo/assets/stylesheets/baz.css created.
If I leave "dest" empty, it does properly compile but the output is in the assets/stylesheets folder (as expected). I'm sure there is a clean way to do this, but I don't know yet.
setting the src, dest, cwd, as well as using the hidden rename options of grunt should get stylus files in your desired format.
example:
stylus: {
compile: {
options: {
compress: true
},
files: [{
cwd: 'public/modules',
dest: 'public/modules',
src: ['*/assets/stylesheets/*.styl'],
expand: true,
rename: function(dest, src) {
var path = require('path');
var module = src.split(path.sep).slice(0,1)[0];
return path.join(dest, module + '/css/' + module + '.css');
}
}]
}
},
grunt tricks - customize file output rename
I have a bunch of various css from plugins and separate style sheets I am using, and I am trying to build a task that will combine and minify all of them. Right now I'm trying to do this with cssmin, I am not sure if I am on the right path, as this is my first time trying this, but here is what I am trying.
cssmin: {
target: {
files: {
'css/output.css': ['css/*.css', 'css/*.min.css']
},
files: [{
expand: true,
cwd: 'css',
src: ['css/output.css'],
dest: 'build/css',
ext: '.min.css'
}]
}
}
The idea is that it will take all css and min.css files in my css folder and combine them into 1 output.css then minify that build/css as a min.css file. I am not too sure if this is how this is suppose to work but this is my first attempt in trying so. The basic idea is combine and minify everything into 1 file in the bottom of my tasks (after I have auto prefixed and used uncss to strip bootstrap). I would appreciate any guidance, is this the right direction with this? This doesn't seem to work correctly, so would appreciate any help.
Thanks for reading!
I am not sure... but this works for me, and only have to include cssmin task in my grunt.registerTask line of code. It minifies all my autoprefixed .css, except the already minified versions and combine them into one big minified stylesheet. Hope it helps ^^
cssmin: {
minify: {
files: [{
expand: true,
cwd: 'src/styles',
src: ['**/*.css', '!**/*.min.css'],
dest: 'public/assets/styles',
ext: '.min.css'
}]
},
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
combine: {
files: {
'public/assets/styles/style.css': ['!public/assets/styles/**/*.min.css', 'public/assets/styles/**/*.css']
}
}
}
minify task is not necessary. When you concatenate several files, cssmin minifies the content automatically.
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
combine: {
files: {
'css/output.min.css': ['css/*.css', '!css/*.min.css']
}
}
}