Consider following directory structure and files lookup:
static/
.. stylus/
.. css/
files: [
{
expand: true,
cwd: 'static/',
src: ['**/*.styl'],
dest: 'css/',
ext: '.css',
},
],
What I wanted to do is to grab all [*.styl] files in stylus/ dir, compile each of them into CSS and put result files into css/ directory. But my pattern makes compiled files live in static/stylus/css/ dir. How can I workaround this?
files: [
{
expand: true,
// enable flatten if you want all files put into a single folder
flatten: true,
// specify the portion of the src folder you dont want to appear in the dest
cwd: 'static/stylus/',
src: ['**/*.styl'],
dest: 'css/',
ext: '.css',
},
],
Related
I'm trying to bundle a number of python dependencies from /dist into the main zip file to deploy it to lambda. These dependencies have hidden subfolders with required files (for whatever reason).
For instance:
dist/psycopg2/.libs or dist/numpy/.libs
Grunt skips those hidden subfolders with just this in compress.dist.files
{
cwd: 'dist/',
src: ['**', '**/.*'],
dest: '/',
expand: true
}
A hidden folder in dist/.somefolder is included that way but nothing in those subfolders. How can I get grunt to compress those as well
Turns out this works:
{
cwd: 'dist/',
src: ['**'],
dest: '/',
dot: true,
expand: true
}
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 managed to copy something from the project to its parent directory but not the other way arround
/themes/next/less/STUFF <- from
/themes/sym/Gruntfile.js
/themes/sym/target2/STUFF <- to (keep folder structure of source)
copy: {
fonts: {
cwd: '..',
expand: true,
src: './next/less/**',
dest: './target2/'
}
},
I managed to copy STUFF but this way its creates a next folder inside target2 ... I do not want that.
What I want is simply like I would do this from the root sym directory
cp -R ../next/less/. target2
I tryed with . as cwd and have it actually totally ignore the dest and place the next folder right into the root.
To flatten all the files to a single folder, use flatten: true together with filter:'isFile'
copy: {
fonts: {
cwd: '..',
expand: true,
flatten: true,
src: './next/less/**',
dest: './target2/STUFF'
filter: 'isFile'
}
}
Ref Flattening the filepath output # github.com/grunt-contrib-copy
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 am new to yeoman and grunt, and i don't get how to copy the folder i created in the app directory to the dist directory.
The folder is /data/locales/lng/_ns_.json and there is several lng folders and multiple ns files.
I would like to copy the whole structure to the dist directory.
I tried with a the copy task and added this :
{
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'data/**/*.{json}'
]
}
But it doesn't work...
"I would like to copy the whole structure to the dist directory."
This should do it:
{
cwd: 'data',
dest: 'path/to/dest',
src: ['**']
}
This will copy all files and directories within the 'data' directory to your destination directory.
More examples here: https://github.com/gruntjs/grunt-contrib-copy#usage-examples