CODEWITHSUNDEEP
javascriptnode.jsgulp
doque
doque

Reputation: 2733

Gulp - Get filename from src()

My goal is to retrieve the filename of a watched file and pass it to a gulp-shell task, which calls a make command and passes part of that filename as an argument.

The Gulpfile:

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}}");
});

The directory structure looks like this:

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

So, I change one of these .scss files (say, sass/folder/folder2/file2.scss and I would like the watch task to retrieve the filename, so I can execute something like make id=file2.scss after stripping the path down to the basename.

How do I best achieve this? Ideally, the "recompile" task would only be called when a file is changed, but not on running gulp initially.

Upvotes: 0

Views: 607

Answers (1)

Joel R Michaliszen
Joel R Michaliszen

Reputation: 4222

I use this with livereload, but i think you can do something like the example:

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

Upvotes: 1

Related Questions