I'm trying to use load-grunt-config to organise better my Grunt tasks.
So far I have had no issues with this. Now, I was trying to configure something like imagemin.
So, basically this is the structure I'm trying to replicate within YAML:
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: 'src/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'dist/' // Destination path prefix
}]
}
And this is my attempt:
images:
files: [
expand: true
cwd: '<%= ui %>/img/'
src:
- '**/*.{png,jpg,gif}'
dest: '<%= dist %>/img'
]
However, something must be wrong as the plugin isn't able to get the correct data and hence, fails.
>> JS-YAML: missed comma between flow collection entries in "grunt/imagemin.yaml" at line 4, column 8:
>> cwd: '<%= ui %>/img/'
>>
Does anyone knows what could be wrong?
Brackets are only for in-line lists. Your list of files should look like this:
images:
files:
- expand: true
cwd: '<%= ui %>/img/'
src:
- '**/*.{png,jpg,gif}'
dest: '<%= dist %>/img'
You can test your YAML for correct syntax with an online parser like this one.
Related
I am trying to setup my grunt file to not to override some folders inside the destination folders, but I couldn't figure out how.
My structure
Basically I have 2 folders:
htdocs
htdocs_src
htdocs_src is the folder we use to develop things, and then we run a watch task that copies all the code to htdocs folder.
My problem
We add some libraries directly on the htdocs folder, so we don't want them to be touched by grunt uglify task... The problem is that it is not happening.
The task is configured this way:
uglify: {
options : {
beautify: false,
report: "min",
mangle: {
except: ['jQuery']
},
exclude: ['!/ifc-easy-checkout*/**/*', '!/ifc-events*/**/*', '!/ifc-vendors*/**/*'],
compress: {
global_defs: {
"DEBUG": false
}/*,
dead_code: true*/
}
},
target: {
cwd: '<%= dirs.GENERATED_JS %>',
src: ['**/*.js'],
dest: '<%= dirs.GENERATED_JS %>',
expand: true
},
},
where on the exclude property I try to say to the plugin not to override these folders, but it doesn't work.
I am currently using grunt-contrib-uglify 2.0.0
I tried several different solutions, such as changing the exclude property for exceptionsFiles, but then it searched for these folders inside the htdocs_src, since it is not there, it doesn't work (but it isn't what I want, once what I need is to avoid some folders to be overriden inside the destination folder).
Any ideas how to setup this plugin?
Try putting the excluded files in the src and remove the exclude tag
target: {
cwd: '<%= dirs.GENERATED_JS %>',
src: ['**/*.js','!/ifc-easy-checkout*/**/*', '!/ifc-events*/**/*', '!/ifc-vendors*/**/*'],
dest: '<%= dirs.GENERATED_JS %>',
expand: true
},
Is there a way to specify multiple source -> destination mappings when transforming jsx files to js files using browserify in grunt?
I have the following in Gruntfile.js that supports a single file transformation, but I was hoping to be able to specify a second mapping for another file. I know I can map based on wild card into a single combined destination file. However, that is not what I want since I don't want an "all or nothing" include of the react components on my various pages. Some of the components only apply to a few pages and should not be included everywhere.
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
//How do I map a second file here without a wild card?
client: {
src: ['react_components/src/component1.jsx'],
dest: 'react_components/build/component1.js'
}
}
Essentially what I hoped for is a way to provide an array of src-dest mappings in the same task in order to create multiple destination files:
client: [{
src: ['react_components/src/component1.jsx'],
dest: 'react_components/build/component1.js'
}]
Something like the above json
As for me, I do not use browserify, I use grunt-react and react-tools. grunt react allows user to define dynamic_mappings, based on regular expressions, something like this:
//Gruntfile.js
grunt.initConfig({
react: {
dynamic_mappings: {
files: [
/* Controllers compiling. */
{
expand: true,
cwd: './app/scripts/controllers/src',
src: ['**/*.jsx'],
dest: './app/scripts/controllers/dest',
ext: '.js'
},
/* ui-components compiling */
{
expand: true,
cwd: './app/scripts/ui-components/src',
src: ['**/**.jsx'],
dest: './app/scripts/ui-components/dest',
ext: '.js'
},
/* JSX test compiling */
{
expand: true,
cwd: './test/ui-components/src',
src: ['**/**.jsx'],
dest: './test/ui-components/dest',
ext: '.test.js'
}
]
}
}
});
I am working on a Gruntfile, and am having difficulty getting a copy task to work the way I want.
I have an Uglify task defined using a dynamic file object like:
uglify: {
files: {
expand: true,
cwd: 'src',
src: [
'some/path/file1.js',
'another/path/file2.js'
],
dest: 'dst',
ext: '.min.js'
}
}
This task works great, and I get my files written out as 'dst/some/path/file1.min.js' and 'dst/another/path/file2.min.js'.
I am working on a copy task, where I would like to copy the files I just built somewhere else. Rather than redefining the rule, I would like to reference the file set with a template.
If I use
copy: {
deploy: {
src: '<%= uglify.files %>',
dest: 'deploy/'
}
}
then I get the
Warning: Object # has no method 'indexOf'
error.
For various reasons beyond the scope of this question, globbing tricks won't work for the deploy.
So, in a copy task, how can I reference the set of files that another task just created?
You have files: {} as an object. It should be an array files: [].
uglify: {
files: [{
expand: true,
cwd: 'src',
src: [
'some/path/file1.js',
'another/path/file2.js'
],
dest: 'dst',
ext: '.min.js'
}]
}
The src on copy config expected to be string or array, but you set an object on it, and when grunt tries to apply indexof method on the src of copy task, error will be the result. you can avoid this by setting uglify.files as array of objects, like this:
uglify: {
files: [{
expand: true,
cwd: 'src',
src: [
'some/path/file1.js',
'another/path/file2.js'
],
dest: 'dst',
ext: '.min.js'
}]
}
Then, it will pass the error but you goal won't meet. you need to select dest of uglify as src for copy. the solution is the grunt method, TEMP FILES, you should set uglify dest in a temp path and then select what you need from there as src of copy task. something like this:
copy:{
deploy:{
files: [{
expand: true,
cwd: 'dst'
src: '**/*.min.js'
dest: 'deploy'
}]
}
}
I've just scaffolded an Angular app using Yeoman. I've noticed that the build task does several things by default, including minifying and concatenating js files.
I'd like to have a simpler build task that didn't do any minifying or concatenation, and, instead, only did the following two things:
compile my .scss into .css
copy a working app into my distribution directory
Can anyone help me write a grunt task that will do (only) these two things?
Many thanks.
Ok, I've edited the default grunt file so that it does what I want.
My solution involved writing tasks called copy:devDist and compass:devDist, and then combining them into a devDist task.
//
// copy:devDist --> copies everything into the dist folder, except styles/
//
copy: {
[...]
devDist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'**','!styles/**' // everything but styles/
]
}]
}
},
//
// compass:devDist --> compile the sass; put result in dist/styles/
//
compass: {
[...]
devDist: {
options: {
cssDir: '<%= yeoman.dist %>/styles'
}
}
},
//
// register a 'devDist' task that calls the two tasks above
//
grunt.registerTask('devDist', [
'clean:dist',
'copy:devDist',
'compass:devDist'
]);
Now running grunt devDist compiles my css and puts a fully functional app into my dist folder. Excellent. :)
I'm trying to copy all the files in a directory to another directory as part of my build process. It works fine for individual files that I specify explicitly but when I try to copy the whole directory it does weird things like copies the full directory structure (or nothing at all). Here is the relevant part from my GruntFile.js:
copy: {
myvoice: {
files: [
{ src:"src/html/index.html", dest:"dist/myvoice/index.html" },
{ src:"src/html/css/style.css", dest:"dist/myvoice/css/style.css" },
{ src:"src/html/js/require.js", dest:"dist/myvoice/js/require.js" },
{ src:"build/myvoice/main.js", dest:"dist/myvoice/js/main.js" },
{ src:"src/html/css/fonts/*", dest:"dist/myvoice/css/fonts/" }
]
}
},
Specifically it's the last line that I can't get to work:
{ src:"src/html/css/fonts/*", dest:"dist/myvoice/css/fonts/" }
The flatten: true option as in this answer might work for some cases, but it seems to me that the more common requirement (as in my case) is to copy a folder and its sub-folder structure, as-is, to dest. It seems that in most cases if you have sub-folders, they are probably being referenced that way in code. The key to doing this is the cwd option, which will preserve folder structure relative to the specified working directory:
copy: {
files: {
cwd: 'path/to/files', // set working folder / root to copy
src: '**/*', // copy all files and subfolders
dest: 'dist/files', // destination folder
expand: true // required when using cwd
}
}
This task will maintain folder structure if you specify a file glob. What you want is the flatten option which will remove the structure.
{
expand: true,
flatten: true,
src: ['src/html/css/fonts/**'],
dest: 'dist/myvoice/css/fonts/',
filter: 'isFile'
}
Find the rest of the available options in the Github repo. Hope this helps.
I would like to add that changing the format of the glob in src will modify how the copy works.
As pointed out by bmoeskau above, the following will copy everything inside dist/ and move it to path/to/dir (overwriting the destination if it already exists).
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '**'
}
}
Note however, that:
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '*'
}
}
Will only copy files inside dist/ as well as directories, but will not copy the contents of those directories to the destination.
Also, the following with src: '*/*' will only copy directories with contents inside dist/. That is, files just inside dist/ will not be copied.
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '*/*'
}
}
Finally, same as above, but src: '**/**' will copy only files inside dist/ as well as files inside dist/ subdirectories to path/to/dir. So there will be no folders inside the destination.
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '*/*',
flatten: true,
filter: 'isFile'
}
}
Had to use egdy instead curly braces for the files segment (in Coffeescript)...
copy: {
files: [
cwd: 'path/to/files'
src: '**/*'
dest: 'dist/files'
expand: true
]
}
If you are developing with angular yeoman , then this is the better way to copy with grunt.
expand: true is required when using cwd. <%= yeoman.app %> is just the app route ('.').
{
expand: true,
cwd: '<%= yeoman.app %>/data',
dest: '<%= yeoman.dist %>/data',
src: ['**']
}