javascript - 'Gulp watch' event takes double the amount of time to compile less compared to normal 'gulp less' command -
i'm having issues gulp 'watch' less function in taking 2x longer compile less files compared individual less function.
when use 'gulp less' takes average of 9/10 seconds
[12:57:15] starting 'less'... [12:57:25] finished 'less' after 9.96 s
however when use 'gulp watch-less', change file trigger watch function takes double time compared 'gulp less'.
[13:03:43] starting 'watch-less'... [13:03:45] finished 'watch-less' after 1.31 s [13:03:48] starting 'less'... [13:04:06] finished 'less' after 18 s
below gulpfile.js pulls in 'paths.json' i've got 5 different themes (names changed question) less file being used needs outputted relevant folder why use function 'updatedestfolder'.
the way less imported change in base theme should update themes 2-5.
/*jslint node: true */ 'use strict'; // require various plugins var gulp = require('gulp'); var watch = require('gulp-watch'); var less = require('gulp-less'); var plumber = require('gulp-plumber'); // pull in external paths json var paths = require('./config/paths.json'); // determine output path depending on source path function updatedestfolder(path) { var folder = ''; if (path.indexof(paths.themes.basetheme) > -1) { folder = paths.themedest.basetheme; } else if (path.indexof(paths.themes.theme2) > -1) { folder = paths.themedest.theme2; } else if (path.indexof(paths.themes.theme3) > -1) { folder = paths.themedest.theme3; } else if (path.indexof(paths.themes.theme4) > -1) { folder = paths.themedest.theme4; } else if (path.indexof(paths.themes.theme5) > -1) { folder = paths.themedest.theme5; } return folder; } // compile less gulp.task('less', function() { var completelesspaths = paths.less.src.concat(paths.less.ignore); // merges both arrays var destfolder; return gulp.src(completelesspaths) .pipe(plumber()) // handle errors plugins .pipe(less({ strictunits: true, compress: true // minify style })) .pipe(gulp.dest(function (file) { destfolder = updatedestfolder(file.path); return destfolder + 'styles/'; })); }); // default tasks run when 'gulp' ran via command line gulp.task('default', ['less', 'js', 'image']); // watch changes less source files, fire relevant function gulp.task('watch-less', function () { gulp.watch(paths.less.src, ['less']); });
paths.json:
{ "less" : { "src" : [ "../orchard.web/themes/theme1base/styles/**/*.less", "../orchard.web/themes/theme2/styles/**/*.less", "../orchard.web/themes/theme3/styles/**/*.less", "../orchard.web/themes/theme4/styles/**/*.less", "../orchard.web/themes/theme5/styles/**/*.less" ], "ignore" : [ "!../**/*.css", "!../**/bootstrap-overrides.less", "!../**/font-awesome.less", "!../**/imports/**/*.less", "!../**/typography*.less", "!../**/*variables*.less" ] }, "themes" : { "basetheme": "theme1base", "theme2": "theme2", "theme3": "theme3", "theme4": "theme4", "theme5": "theme5", }, "themedest" : { "basetheme" : "../orchard.web/themes/theme1base/", "theme2" : "../orchard.web/themes/theme2/", "theme3" : "../orchard.web/themes/theme3/", "theme4": "../orchard.web/themes/theme4/", "theme5" : "../orchard.web/themes/theme5/", } }
if suggest improvements of determining dest folder without needing use function i'd grateful well.
thanks
i have no idea why takes more time, here's how can determine dest folder better:
gulp.dst(function(file) { return file.split("/styles")[0] + "/styles/"; });
Comments
Post a Comment