使用@import观察并编译更少的文件 [英] Gulp watch and compile less files with @import

问题描述

我试着让自己的头脑around to，观看并编译一个.less项目+ livereload。
我有一个使用 @import 的style.less文件。
当我运行gulp任务时，它似乎并不了解导入。当我修改主文件时，gulp编译文件并刷新浏览器，但如果我只修改一个导入，则忽略这些更改。

这是我的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/'] 
}））
。 （前缀（后8个版本，> 1％，ie 8，ie 7），{cascade：true}）
 .pipe（gulp.dest（'./'） ）
 .pipe（livereload（））; 
}）; 
  

我没有在 gulp.src（'中指定主文件名。 / *。less'），但是所有较少的文件都是独立编译的。

谢谢

解决方案

现在你打开单个 gulp.src 文件，然后看着你用gulp打开文件。
以下操作将把watch和src分成两个任务，允许单独的文件和src监视。

  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'）//只编译入口文件
 .pipe （plumber（））
 .pipe（less（{
 paths：['./'，'./overrides/'] 
}））
 .pipe（prefix（ （./））$ b $（cascade：true），last 8 version，> 1％，ie 8，ie 7 b .pipe（livereload（））; 
}）; 
 gulp.task（'watch'，function（）{
 gulp.watch（'./*。less'，['less']）; //观察所有.less文件，然后运行减少任务
}）; 
 
 gulp.task（'default'，['watch']）; //默认会运行'entry'监视任务
  

当 *。less 被修改后，它将运行只编译src文件的任务。
如果不检查导入设置，则应正确包含@imports。

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

解决方案

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.

这篇关于使用@import观察并编译更少的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！