Here is the thing. I have following structure of my LESS files:
/less/root.less
/less/includes1/*.less (a lot of less files)
/less/includes2/*.less (a lot of less files)
I am using gulp to compile my LESS files. Source:
gulp.task('less', function () {
var combined = combiner.obj([
gulp.src('./less/**/*.less'),
less(),
gulp.dest('./www/dist/screen.css')
]);
// any errors in the above streams will get caught by this listener, instead of being thrown:
combined.on('error', console.error.bind(console));
return combined;
});
The problem is in the specified path. I understand this path ./less/**/*.less like this: Recursively go through all folders and compile all files that ends .less. Problem is that compiler wants to compile each file one by one and doesnt know that all files are included to my source.less. It doesnt look for root files and doesnt know what files are included parts and what are root files.
How do I tell LESS parser which files are root and which files are to be imported. In SASS it is specified via underscore in file name like this: _includedPart.scss.
Well you can use https://github.com/robrich/gulp-ignore. See: How can I use a glob to ignore files that start with an underscore?
var condition = '_*.less'; //exclude condition
gulp.src('content/**/*.less')
.pipe(gulpIgnore.exclude(condition))
In many situations you all your Less code into a single CSS file. Your main file(s) contain #import directive which point all other required Less files.
Related
Right now, I am using Gulp for a project which is basically a CSS framework. The way I am doing it right now is, I #import all the other .less files in a single app.less and then pass it to the Gulp task:
// Compile
gulp.task("compile", function() {
return gulp
.src("source/app.less")
.pipe(less())
.pipe(concat("framework.edge.css"))
.pipe(gulp.dest("./dist"))
.pipe(
autoprefixer({
browsers: ["last 4 versions"],
cascade: false
})
)
.pipe(concat("framework.css"))
.pipe(gulp.dest("./dist"))
.pipe(sourcemaps.init())
.pipe(
uglify({
maxLineLength: 80,
UglyComments: false
})
)
.pipe(concat("framework.min.css"))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("./dist"));
});
This works totally as expected. The stylesheets are first compiled and the exported as app.edge.css, then it is passed through autoprefixer, exporting framework.css and then the minification process.
The problem is, now I want to export each stylesheet as a separate module, such as
grids.css
scaffolding.css
and so on...
How can I achieve this? I am actually not getting what logic to apply.
Use globbing
If a gulp tasks's src is x/**/*.less, the task will process all LESS files in x or any subfolder of x and will output each file separately in the dest, preserving the src's file structure.
To exclude a file or files, use !....
Learn the globbing rules in the Glob Primer, and test your pattern with the Glob online tester
Depending on your needs, you might want two tasks, one for outputting individual files and one for building the full framework.css.
I have my Gulp file set up:
elixir(function(mix) {
mix.sass('app.scss').sass('admin.scss');
});
Which in my eyes should take both scss files and compile them into the public css folder.
However, it just creates one app.css file and doesn't create the admin.css file.
My terminal shows:
[23:01:43] Running Sass: resources/assets/sass/app.scss
[23:01:44] Running Sass: resources/assets/sass/admin.scss
[23:01:44] Finished 'watch' after 315 ms
[23:01:44] gulp-notify: [Laravel Elixir] Sass Compiled!
[23:01:45] gulp-notify: [Laravel Elixir] Sass Compiled!
So whats happening with the admin.scss file?
To do this you have to specify the output folder for each file (and also restart gulp / gulp watch)
elixir(function(mix) {
mix
.sass('app.scss', './public/css/app.css')
.sass('admin.scss', './public/css/admin.css');
});
Once again, people at Larachat have pointed me in the right direction, so I thought I put this info here.
Turns out it's pretty easy, and it's documented: http://laravel.com/docs/5.1/elixir#sass
Just put the files in an array instead of calling sass two times, like this:
mix.sass(['app.scss', 'admin.scss'], 'public/css')
how to exclude certain files from a directory from watched. for eg I have a stylesheets folder I am watching for *.css and create a *.min.css using cssmin. But it keeps going in a loop as the folder watched has a new/changed *.min.css(ending in css).
'stylesheet-css':
files: ['public/stylesheets/*.css']
tasks:['cssmin:stylesheet-css']
I tried couple of things..
'stylesheet-css':
files: [ '!(public/stylesheets/*.min.css)'] # any thing other than .min.css
tasks:['cssmin:stylesheet-css']
doesn't seem to work
You need to specify the files you want, then the files you don't want (both sets), so something like:
'stylesheet-css':
files: ['public/stylesheets/*.css', '!public/stylesheets/*.min.css']
tasks:['cssmin:stylesheet-css']
For reference, see Grunt globbing patterns.
How could I specify output file name based on input file name?
I'm specifically trying to use grunt task (grunt-closure-tools or grunt-closure-compiler) to compile (minify) multiple javascript files, let's say all satisfying '/source/**/*.js' and want to output them in format $(original_file_path_without_extension).min.js
In all samples I've seen, the output is specified as single file only but I need to minify each file separately and into the same folder where the original file comes from.
Finally, I figured out the configuration. The trick is in building the files object dynamically (as described here). My configuration for grunt-closure-tools looks like this:
closureCompiler: {
options: {
// .. YOUR OPTIONS (ommited)
},
minify: {
files: [
{
expand: true,
src: ['source/**/*.js', '!source/**/*.min.js'],
ext: '.min.js'
}
]
}
}
Closure-compiler is designed to simultaneously compile all of your javascript into a single file to minimize requests. There are really only two use cases where separate output files are supported:
Multiple modules
In order to preserve renaming references, you'll have to compile your files simultaneously. The way to do that and maintain separate files is with modules. See How do I split my javascript into modules using Google's Closure Compiler?
Non-related Files
If your files don't have inter-dependencies, then you would simply run your grunt task multiple times - one for each file.
The project I'm working on is using code to run the less compiler.
I'm having trouble adding an inline source map to the compiled css from my less files.
From node we are running the following code:
var less = require('less'),
options = {
strictMath: true
};
less.render(data, options, function(err, css) {
callback(err, css);
});
Is there an option I can add?
I've tried adding sourceMap: true and outputSourceFiles: true without success.
Since Less v 1.5 the compiler has support for the following options
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
The sourceMap and outputSourceFiles options you have tried seems to related to grunt-contrib-less, see: https://github.com/gruntjs/grunt-contrib-less