I'm trying to copy everything in my css directory, including any nested folders and files in those folders.
copy: {
main: {
options: {
expand: true
},
files: [
{ src: 'public/static/css/**', dest: '../../../'}
]
}
}
The above works but it appears to be keeping the directory structure.
So in my root where the files are copied to I have:
>public>static>css>styles.css
>public static>css>nested-folder>styles.css
But I would just like to have:
styles.css
>nested-folder>styles.css
Is this possible?
Set the current working directory, cwd, in the options. There are some instructions in the Grunt docs and your copy options would look something like:
copy: {
main: {
options: {
expand: true,
cwd: 'public/static/css',
src : [ '**' ],
dest: '../../../'
}
}
}
Related
Is it possible using the dynamic mapping configuration to output one minimized file instead of one per src file?
cssmin: {
target: {
files: [{
expand: true,
cwd: 'release/css',
src: ['*.css', '!*.min.css'],
dest: 'css/finalfile.css',
ext: '.min.css'
}]
}
}
This configuration creates folder named css/finalfile.css and generates one output file per one src file.
Any help appreciated.
You can use standard file config to do that.
cssmin: {
target: {
files: {
'output.css': ['app/**/*.css']
}
}
}
Above will minify and concatenate all the CSS files from app directory into output.css
There is source folder and publish folder in the project. I want to copy all files and folders from source to publish.
Related code from Gruntfiles.js:
grunt.initConfig({
copy: {
main: {
files: [
{ src: ['source/**/*'], dest: 'publish/'},
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['copy']);
However it copies source folder itself and puts in publish folder.
Tried a lot of variations from grunt-copy documentation and cannot find solution.
Try this configuration:
grunt.initConfig({
copy: {
main: {
cwd: 'source',
src: ['**/*'],
dest: 'publish/',
expand: true
}
}
});
If you want to only copy some parts of SRC and build the others on the normal flow (SASS, CONCAT, MINIFY plugins), you may choose to:
copy: {
main: {
files: [
{expand: true, cwd: '../src/', src: ['images/*'], dest: '../public/images'},
...
]
}
}
The key point above is the CWD which allows you to copy folders as is instead of copying the "src" inside "public".
I have a directory structure as follows:
source/
libraries/
d3.js
lodash.js
//etc
I have grunt-copy setup as follows:
copy: {
main: {
files: [
{
src: ["source/libraries/*.js"],
dest: "build/",
flatten: true
}
I expect it to flatten the output into build, so that I will have
build/
d3.js
//etc
Instead, I get a reproduction of the original directory structure in build:
build/
source/
libraries/
d3.js
//etc
What gives? Am I not using flatten properly?
Well, if you're only using flatten because you want everything in source/libraries to go into build, I would suggest actually using the cwd (current working directory) option instead. If, on the other hand, you actually have subfolders in source/libraries then you probably want that src line to be source/libraries/**/*.js.
In any case, if you can use cwd instead it would look like this:
copy: {
main: {
files: [
{
src: ["*.js"],
dest: "build/",
cwd: "source/libraries/"
}
]
}
For the other case, maybe this? (Notice the expand option set to true)
copy: {
main: {
files: [
{
src: ["source/libraries/**/*.js"],
dest: "build/",
flatten: true,
expand: true
}
]
}
}
I've found this solution to building less using the grunt-contrib-less package, but I can't figure out using grunts configuration tasks (http://gruntjs.com/configuring-tasks) how to output the *.css files to a specific destination. I tried dest: "C:/my_folder/". Any suggestions?
less: {
options: {
paths: ['css/base']
},
// target name
src: {
// no need for files, the config below should work
expand: true,
cwd: "css/base",
src: "*.less",
ext: ".css"
}
}
I've also tried using the example from grunt-contrib-less but I can't figure out how to get it to a) just choose all the files and build them into the same file name with a different extension (ie. .less to .css) like it does above b) I don't understand the options JSON attribute (even reading the docs)
less: {
development: {
options: {
paths: ["assets/css"]
},
files: {
"dev/css/*.css": "dev/less/*.less"
}
},
production: {
options: {
paths: ["assets/css"],
cleancss: true
},
files: {
"prod/css/*.css": "dev/less/*.less"
}
}
}
At the end of all this I'd really like to have a combination of both of these that took all my less and compiles it to css for development and finally css for production which is minified.
I've thumbed through http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/ and http://www.integralist.co.uk/Grunt-Boilerplate.html without much luck understanding Grunt.
You need to specify dest property. the best way to specify sources of less files is to use relative path.( relative Gruntfile.js )
less: {
options: {
paths: ['css/base']
},
// target name
src: {
expand: true,
cwd: "css/base",
src: "*.less",
ext: ".css"
dest: "build/" // Destination for your compiled css files.
}
}
Is there a way by which we can exclude the folder root when you are compressing all files within a folder?
grunt.initConfig({
compress: {
main: {
files: [
{expand: true, src: ['dist/**', 'xyz/**']},
]
}
}
});
How can we exclude dist and xyz folders from being included in the compressed file?
Thanks,
Paddy
If your want the files under the folder included, you need to change the cwd for each target so that they are treated as the root for each glob pattern
grunt.initConfig({
compress: {
main: {
files: [
{cwd: 'dist/', expand: true, src: ['**']},
{cwd: 'xyz/', expand: true, src: ['**']},
]
}
}
});
If you are looking just exclude the folders in the root, then use ! patterns that Kyle mentioned
Prepending a ! will negate a pattern:
{expand: true, src: ['dist/**', '!xyz/**']}
See: http://gruntjs.com/configuring-tasks#globbing-patterns