VS 2015 Use Gulp to Compile Less -
i trying set similar process web essentials offered in old visual studio in newest one. of aren't familiar how worked, process was:
file setup: a.less a.css a.min.css a.css.map b.less b.css b.min.css b.css.map
so when open a.less , start editing it, automatically check out a.css, a.min.css, , a.css.map well. when save, recompile 3 sub files saving less file.
i able replicate writing separate task each file so:
gulp.task('checkout', function () { return gulp.src('styles/brands.css') .pipe(tfs()); }); gulp.task('less', ['checkout'], function () { del('styles/brands.css'); return gulp.src('styles/brands.less') .pipe(less()) .pipe(gulp.dest('styles')); });
this uses gulp-tfs-checkout checkout sub file, , less compile. works 100% how expect to. can set watch watch less task , work great. problem is, how expand handle less files in folder? write separate checkout , compile tasks each file, that's not ideal.
i used writing projects saving less file compiles , concats of them single or couple files, work project , multiple reasons need keep css files separate now. use visual studio's bundling, older project , people have referenced css files randomly outside of bundling process pretty big/risky task change that.
i don't know how watch many files, change current 1 if makes sense.
gulp.task('less', function () { return gulp.src('styles/*.less') //watch of files .pipe(tfs())//checkout css file less file changed here somehow .pipe(less()) //compile css file changed .pipe(gulp.dest('styles')); });
i used grunt , gulp, said things in bulk on project. i'm not sure how when want watch files, change 1
why don't create tasks per each file dynamically? can read contents of folder less files fs.readdirsync , if file less file create each task 'checkout' + filename , 'less' + filename.
being dynamically not have problems when create new less file or when remove one.
Comments
Post a Comment