We Keep Coding

Compiling SASS files using Grunt creates an unnecessary folder

So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out.
Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder:
This is how it looks:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
files:['sass/*.scss'],
task:['sass']
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: '',
src: ['sass/*.scss'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
And this is how my folder looks after I run the task:
/SASS/somefile.scss
/CSS/SASS/somefile.css
The SASS folder it should not be there, the result i expect is:
/SASS/somefile.scss
/CSS/somefile.css
Thanks in advance!

The problem is due to your parameters for building the files object dynamically. You need to set the cwd parameter: "All src matches are relative to (but don't include) this path."
files: [{
expand: true,
cwd: 'sass/',
src: '*.scss',
dest: 'css/',
ext: '.css'
}]

Create a SASS folder under your CSS folder. Your somefile.scss file move into SASS folder then run.
like as :
CSS/
SASS/somefile.scss

connecting grunt-contrib-sass to yeoman and grunt-contrib-watch

Very similar to this question.
I've installed the node lib and have it in my package.json:
"devDependencies": {
...
"grunt-contrib-sass": "~0.6.0"
}
and have a block in my Gruntfile.js:
grunt.initConfig({
...
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles/scss',
src: ['scss/{,*/}*.scss'],
dest: '<%= yeoman.app %>/styles/css',
ext: '.css'
}]
}
}
My file structure looks like so:
app
styles
css
scss
And I have the sass gem installed.
I'm sure I'm missing something very basic here that needs to be included. My yo serve doesn't seem to be putting the files in the right place to be caught up and used.
I imagine theres something I'm missing in the watch block, but I'm not sure what that is.

so my Gruntfile.js needed to look like this:
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles/scss',
src: ['*.scss'],
dest: '.tmp/styles/',
ext: '.css'
}]
}
}
and I needed to add sass to the styles task in the watch block.

Compile, Concatenate and Minify Sass files with Grunt

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a compact distribution. I can't figure out what to use to compile, concat and minify my .scss files into one single css file.
My project is organized by modules, so the .scss files are scattered, rather than grouped in a single directory.
I've looked at grunt-contrib-sass and grunt-contrib-compass, but they both seem to require you to individually specify files to compile. I'm looking for a solution that won't have to change when I add source files.
What Grunt plugin can I use to compile, concat and minify my sass files into a single css file?
I'm currently using concat and recess to concat and minify my plain css files:
concat: {
css: {
src: ['<%= src.css %>'],
dest: '<%= distdir %>/<%= pkg.name %>.css'
},
},
recess: {
min: {
files: {
'<%= distdir %>/<%= pkg.name %>.css': ['<%= distdir %>/<%= pkg.name %>.css']
},
options: {
compress: true
}
}
}

I think a documentation about patterns can help you.
http://gruntjs.com/configuring-tasks#globbing-patterns
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
src: 'foo/{a,b}*.sass', // you can use some kind of regular expression
dest: 'foo/css/
}
}

How do I tell Grunt to NOT minify or concatenate js files in a build task?

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. :)

Copy all files from directory to another with Grunt.js copy

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: ['**']
}