How Grunt watches children folder src, and putting output in same child dest? - sass

Question

I am new to NodeJs and Grunt, and I want to ask a question that is probably already answered, but I either couldn't understand solution, or couldn't find it.
So, I have www folder with many subfolders with projects. Every project has same folders inside,
--css/style.css
--sass/style.scss
--js/script.js + /1.js + /2.js
--build/script.js
--build/style.css
My Gruntfile.js with grunt is at www folder, and my grunt concat, goes something like this:
grunt.initConfig({
concat: {
dist: {
src: ['**/js/1.js', '**/js/2.js', '**/js/script.js'],
dest: '**/build/script.js'
},
},
});
Now, you can probably see the problem, I get error "Can't create directory C/wamp/www/** ..., and I need to be able to select same folder as where it found js (and later css and other tasks as well).
The most simple solution is needed, and I plan to use concat, watch, uglify, sass (solution for sass is welcome as well).
I am apologizing if this question is repeated, but I can't find an answer.

Answer 1

You cannot use a globbing pattern for your dest value, as globbing is for matching patterns. You will need a separate src -> dest mapping for each project subfolder. There are a few ways to do this, but I will use the Files Object Format. Assuming project subfolders named proj1/ and proj2/, the configuration would look like the following:
concat: {
dist: {
files: {
'proj1/build/script.js': 'proj1/js/*.js',
'proj2/build/script.js': 'proj2/js/*.js'
}
}
}
If you are going to keep adding project subfolders, it might make sense to build the concat configuration dynamically:
var project_dirs = ['proj1', 'proj2'];
var concat_config = {
dist: {}
};
concat_config.dist.files = project_dirs.reduce(function (memo, dir) {
var src = dir + '/js/*.js';
var dest = dir + '/build/script.js';
memo[dest] = src;
return memo;
}, {});
grunt.initConfig({
concat: concat_config
});

Answer 2

First
Concat and uglify your js:
concat.dev = {
files: {
"public/myapp.development.js": [
"with-bootstrap/public/js/vendor", "with-bootstrap/public/js/**/*.js"
]
}
};
//Uglify ===============================
config.uglify = {
dist: {
options: {
sourceMap: "public/myapp.production.js.map"
},
files: {
"public/myapp.production.js": ["public/myapp.development.js"]
}
}
}
and your sass:
//Sass ===============================
var sass;
config.sass = sass = {};
//distribution
sass.dist = {
options: {
style: "compressed",
noCache: true,
sourcemap: 'none',
update: true
},
files: {
"<%= src.distFolder %>": "<%= src.sassMain %>"
}
};
//development env.
sass.dev = {
options: {
style: "expanded",
lineNumber: true,
},
files: {
"<%= src.devFolder %>": "<%= src.sassMain %>"
}
};
watch your changes in that case I am watching just sass directory:
//Watch ===============================
config.watch = {
scripts: {
files: ["<%= src.libFolder %>", "<%= src.sassFolder %>"],
tasks: ["dev", "sass:dist"]
//,tasks: ["dev",'sass:dist']
}
}
anyway I hope that helps you for start.