With Grunt, how can I compile all * .less files if I have global mixins and constants?
I want to organize my HTML, JS and LESS modulo. I'm already using Grunt to compile to *.js
and *.html
from my source folders.
So, I configured grunt like this:
grunt.initConfig({
less: {
ALL: {
files: { 'compiled.css': '**/*.less' }
}
}
}
But this faces a serious problem: the constants and mixins from my files are /helper/*.less
not available to other .less files.
It seems to grunt-contrib-less
compile every single file unchanged, and then concatenate the output, but doesn't compile anything "globally".
The only solution I can think of is to create and maintain master.less
that @import
for each individual .less file. But I'm trying to achieve an extremely modular build process and I don't have to list any HTML or JS files, so I really hope to find a solution *.less
too!
source to share
Thanks to @ seven-phase-max for the next answer!
less-plugin-glob
Allows wildcards in operators @import
! Works great!
// master.less
@import "helpers/**/*.less";
@import "modules/**/*.less";
And all you need to add to your Grunt config is a parameter plugins
:
// Gruntfile.js
grunt.initConfig({
less: {
'MASTER': {
src: 'master.less',
dest: 'master.css',
options: {
plugins: [ require('less-plugin-glob') ]
}
}
}
});
And, don't forget npm install less-plugin-glob
.
source to share
Here is one way to achieve a problem-free development.
However, this requires a generated file and a custom task.
Automatic file creation master.less
Create a task that generates master.less
by writing an instruction @import
for each file *.less
:
grunt.registerTask('generate-master-less', '', function() {
generateFileList({
srcCwd: 'modules',
src: '**/*.less',
dest: 'less/master.less',
header: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
footer: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
template: '@import "<%= filename %>";\n',
join: ''
});
});
function generateFileList(options) {
var _ = grunt.util._;
var files = grunt.file.expand({ cwd: options.srcCwd }, options.src);
var results = files.map(function (filename) {
return _.template(options.template, { 'filename': filename });
});
var result = options.header + results.join(options.join) + options.footer;
grunt.file.write(options.dest, result);
}
Then use grunt-contrib-less
to just build master.less
.
source to share