Question

在style.less（它的主要工作文件），colors.less，fonts.less，mixins.less等较少的文件夹中有一些.less文件等等

我使用@import在主style.less文件中添加其他文件。

@import "colors.less";
@import "fonts.less";
@import "mixins.less";

下面是我的gulpfile.js

'use strict';

var gulp = require('gulp');
var less = require('gulp-less'); 
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');

function swallowError (error) {

  // If you want details of the error in the console
  console.log(error.toString());

  this.emit('end');
}


/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./src/less/style.less')
    .pipe(less())
    .on('error', swallowError)
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('./prod/css/'));
}); 
/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./src/**/*.less' , ['compile-less']);
});

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

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./prod/"
        }
    }); 
    gulp.watch("./src/less/*.less").on("change", reload);
    gulp.watch("./prod/*.html").on("change", reload);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['watch-less', 'serve']);

（我以this code为例）。

因此gulp可以很好地使用style.less文件并正确快速地编译它，但是当我尝试更改colors.less文件或其他导入的文件时，gulp不会＆＃39工作。我需要停止gulp并再次手动重新启动它以编译导入文件中的更改。怎么了？

Gulp没有编译@import更少的文件

0 个答案: