咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜 [英] gulp-changed with gulp-concat not working

问题描述

我想只编译已更改的 .less 文件，以加快我的调试/编码工作流程。

$ p
$ b $ $ $ $ $ $ $ $ gulp.src（'core / ** / *。less'）$ （'core'））
.pipe（less（）。on（'error'，handleError））
.pipe（autoprefixer（'last 2 version'））
.pipe（remember（））
.pipe（concat（'main.min.css'））
.pipe（gulp.dest（'core'））
.on （'end'，resolve）
.on（'error'，reject）;

我使用 gulp-changed ，因为它起初没有工作，我也尝试使用 gulp-remember ，但没有任何效果。这款手表的工作原理，它编译速度超快，但它完全没有效果。

如果我删除 changed（'core'）和 remember（）它可以工作，但速度较慢（大约16秒）。

解决方案

gulp-changed 不适合您的用例，因为它旨在将输入文件与磁盘上的输出文件进行比较。
$ b 假设你有一个输入文件 core / foo / bar.less ，你通过改变（ 'DIST'）。它的功能是查找输出文件 dist / foo / bar.less 。如果输入文件比输出文件新，则通过。否则它会被过滤掉。

这意味着使用 changed（'core'）不可能工作。它将输入文件 core / foo / bar.less 与输出文件 core / foo / bar.less 进行比较。 但它们是相同的文件。这意味着输入文件可以从不比输出文件更新，并且永远不会传递。

还有一个问题。每个输入文件没有一个输出文件。所有的 .less 文件都被编译为一个 main.min.css 文件。尽管您可以使用自定义比较器进行此项工作，但它并不适用于开箱即用。

你真正想要的是 吞缓存 。与其将每个输入文件与磁盘上的输出文件进行比较，它将每个输入文件与已缓存在内存中的相同文件的先前版本进行比较。

  var cached = require（'gulp-cached'）; 
 $ b $ gulp.task（'css'，function（）{
 return gulp.src（'core / ** / *。less'）
 .pipe（cached（' （'less'））
。（更少（））
 .pipe（autoprefixer（'last 2 version'））
 .pipe （concat（'main.min.css'））
 .pipe（gulp.dest（'core'））; 
}）; 
  

I want to compile only the .less files that have changed in order to speed up my debug/coding workflow.

Here is my gulp task:

gulp.src('core/**/*.less')
  .pipe(changed('core'))
  .pipe(less().on('error', handleError))
  .pipe(autoprefixer('last 2 version'))
  .pipe(remember())
  .pipe(concat('main.min.css'))
  .pipe(gulp.dest('core'))
  .on('end', resolve)
  .on('error', reject);

I used gulp-changed and because it didn't work at first, I tried to use gulp-remember as well, but with no effect. The watch works, it compiles super fast, but it has no effect at all.

If I remove changed('core') and remember() it works, but it's slower (around 16 seconds).

解决方案

gulp-changed is a poor fit for your use case, since it is meant to compare input files with output files on disk.

Say you have an input file core/foo/bar.less that you pipe through changed('dist'). What this does is to look for an output file dist/foo/bar.less. If the input file is newer than the output file, it is passed through. Otherwise it is filtered out.

That means using changed('core') cannot possibly work. It compares the input file core/foo/bar.less with the output file core/foo/bar.less. But they're the same file. That means the input file can never be newer than the output file and is never passed through.

There's another problem. You don't have one output file for each input file. All your .less files are compiled into one main.min.css file. While you can make this work using a custom comparator it doesn't work out of the box.

What you actually want is gulp-cached. Instead of comparing each input file with an output file on disk it compares each input file with a previous version of the same file that has been cached in memory.

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

gulp.task('css', function() {
  return gulp.src('core/**/*.less')
    .pipe(cached('less'))
    .pipe(less())
    .pipe(autoprefixer('last 2 version'))
    .pipe(remember('less'))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest('core'));
});

这篇关于咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！