Question

94

Gulp watch and compile less files with @import

rated 0 times [ 99] [ 5] / answers: 1 / hits: 16318 / 10 Years ago, fri, may 30, 2014, 12:00:00

I'm trying to get my head around gulp to watch and compile a .less project + livereload.
I have a style.less file which use @import.
When i run the gulp task it doesn't seem to understand the imports. When I modify the main less file, gulp compiles the file and refresh the browser but if i modify only an import, the changes are ignored.

Here is my gulpfile.js

var gulp = require('gulp');

var less = require('gulp-less');

var watch = require('gulp-watch');

var prefix = require('gulp-autoprefixer');

var plumber = require('gulp-plumber');

var livereload = require('gulp-livereload');

var path = require('path');



gulp.task('default', function() {

    return gulp.src('./style.less')

        .pipe(watch())

        .pipe(plumber())

        .pipe(less({

          paths: ['./', './overrides/']

        }))

        .pipe(prefix(last 8 version, > 1%, ie 8, ie 7), {cascade:true})

        .pipe(gulp.dest('./'))

        .pipe(livereload());

});

I tried not specifying the main file name in gulp.src('./*.less') but then all of the less files are compiled indvidually.

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianod

Add To Favorites

Follow

Total Points: 667

Total Questions: 106

Total Answers: 92

Location: Jordan

Member since Thu, Aug 5, 2021

3 Years ago

lucianod questions

1 Angular Material MatToolTip show up only when the element is truncated

Tue, Feb 9, 21, 00:00, 3 Years ago

1 How to catch server errors in Nuxt.js so it doesn't crash page render? (Vue)

Wed, Feb 3, 21, 00:00, 3 Years ago

1 How to use window.postmessage to communicate with parent window

Thu, Aug 6, 20, 00:00, 4 Years ago

1 ESM import on webpackConfig

Sat, Jul 25, 20, 00:00, 4 Years ago

1 Snackbar Vuetify - override method after timeout

Tue, Oct 30, 18, 00:00, 6 Years ago

View All

answered 10 Years ago shane · Accepted Answer

Right now you are opening the single gulp.src file, and watching After you open the file with gulp.
The following will split the watching and src into two tasks, allowing for separate file and src watching.

var gulp = require('gulp');

var less = require('gulp-less');

var watch = require('gulp-watch');

var prefix = require('gulp-autoprefixer');

var plumber = require('gulp-plumber');

var livereload = require('gulp-livereload');

var path = require('path');



gulp.task('less', function() {

    return gulp.src('./style.less')  // only compile the entry file

        .pipe(plumber())

        .pipe(less({

          paths: ['./', './overrides/']

        }))

        .pipe(prefix(last 8 version, > 1%, ie 8, ie 7), {cascade:true})

        .pipe(gulp.dest('./'))

        .pipe(livereload());

});

gulp.task('watch', function() {

    gulp.watch('./*.less', ['less']);  // Watch all the .less files, then run the less task

});



gulp.task('default', ['watch']); // Default will run the 'entry' watch task

When Any of the files found with *.less are altered it will then run the task which will compile just the src file.
The @imports should be 'included' correctly, if not check the import settings.