javascript - Gulp - 从 src() 获取文件名

Question

我的目标是检索监视文件的文件名并将其传递给 gulp-shell 任务，该任务调用 make 命令并将该文件名的一部分传递为一个论点。

Gulp 文件:

var gulp    = require("gulp");
var connect = require("gulp-connect");
var debug   = require("gulp-debug");
var shell   = require("gulp-shell");
var watch   = require("gulp-watch");


const PATTERN = "sass/**/*.scss"

// Default tasks to be executed
gulp.task("default", ["connect", "watch"]);

gulp.task("connect", function() {
    connect.server({
        root: ".",
        livereload: true
    });
});

gulp.task("watch", function() {
    gulp.src(PATTERN)
        .pipe(watch(PATTERN))
        .pipe(debug())
        .pipe(connect.reload())
});

gulp.task("recompile", function() {
    // need {{file}}
    shell("compiling {{file}}");
});

目录结构如下:

.
..
gulpfile.js
sass/folder/file1.scss
sass/folder/folder2/file2.scss
sass/file3.scss

因此，我更改了这些 .scss 文件之一(例如，sass/folder/folder2/file2.scss)，我希望监视任务检索文件名，这样我就可以执行类似的操作将路径剥离为基本名称后，make id=file2.scss。

我怎样才能最好地实现这一目标？ 理想情况下，“重新编译”任务仅在文件更改时调用，而不是在最初运行gulp时调用。

Answer 1

我将其与 livereload 一起使用，但我认为您可以执行类似示例的操作:

gulp.watch([PATTERN]).on("change", function (changeInfo) {
    connect.reload();
    console.log("Changed: " + changeInfo.path);
});