Question

我正在尝试建立一个类似于Web Essentials在最新版本的Visual Studio中提供的过程。对于那些不熟悉它如何工作的人来说，过程是：

File Setup:
    a.less
        a.css
            a.min.css
            a.css.map

     b.less
        b.css
            b.min.css
            b.css.map

所以基本上当你打开a.less并开始编辑它时，它会自动检出a.css，a.min.css和a.css.map。然后，当您保存时，它将重新编译3个子文件以及保存较少的文件。

我可以通过为每个文件编写一个单独的任务来复制它，如下所示：

gulp.task('checkout', function () {
    return gulp.src('Styles/brands.css')
        .pipe(tfs());
});


gulp.task('less', ['checkout'], function () {
    del('Styles/brands.css');

    return gulp.src('Styles/brands.less')
        .pipe(less())
        .pipe(gulp.dest('Styles'));
});

这使用gulp-tfs-checkout签出子文件，然后使用less来编译。这100％是我期望的。我可以设置一个手表来观察较少的任务，一切都会很好。唯一的问题是，如何扩展它以处理该文件夹中所有较少的文件？我可以为每个文件编写单独的签出和编译任务，但这并不是很理想。

我习惯于编写保存任何文件编译的项目，并将所有文件编译成单个或几个文件，但这是一个工作项目，由于多种原因，我需要将css文件保持分离，因为它们现在是。我们使用visual studio的捆绑，但它是一个较旧的项目，人们在捆绑过程之外随机引用了css文件，因此改变它将是一个相当大/风险的任务。

我不知道如何观看多个文件，但只有在有意义的情况下才更改当前文件。

gulp.task('less', function () {
    return gulp.src('Styles/*.less') //watch all of my files
        .pipe(tfs())//checkout only the css file for the less file that was changed here somehow
        .pipe(less()) //compile only the css file that was changed
        .pipe(gulp.dest('Styles'));
});

我已经习惯了咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜呜当我想要观看所有文件时，我不知道该怎么做，但只改变1

Answer 1

为什么不动态地为每个文件创建所有这些任务？您可以使用fs.readdirSync读取文件较少的文件夹的内容，然后如果文件是您为每个任务创建的文件较少，那么结帐＆＃39; +文件名，然后＆＃39; less＆＃39; +文件名。
动态创建新的less文件或删除文件时，您不会遇到任何问题。

VS 2015使用Gulp编译更少

1 个答案: