Gulp: Abnormal behavior of program

Question

I'm new to Gulp and I'm having a problem with gulp,here are some points that I want to be done

• I want to lookup for a file that has an .storyboard extension (it is already DONE)

• I want to perform a task whenever a certain file's content is changed,

• I want to Watch that file and when something is being changed in that file

• I want to rewrite its content by removing all other content that was already in the file.

When I make changes in file with .storyboard extension, it just keep on displaying a message done, file has been saved

Here is my Code:

//fs to read and write files while path is for iterating directories
fs = require('fs'),
    path = require('path')
//DomParser to Parse Xml 
var DOMParser = new (require('xmldom')).DOMParser({ normalizeTags: { default: false } });

//Gulp for detecting changes
var gulp = require('gulp')

var mainStoryBoardFile;

function crawl(dir) {
    // console.log('[+]', dir);
    var files = fs.readdirSync(dir);
    for (var file in files) {

        var next = path.join(dir, files[file]);
        //iterate through files to check whether next is a file or direcory
        if (fs.lstatSync(next).isDirectory()) {
            //if its a directory dive into it
            crawl(next);
        } else if (next.indexOf('.storyboard') >= 0) {
            //if its a file just check it whether it is a .storyboard file or not
            mainStoryBoardFile = next;
            mainStoryBoardFile = mainStoryBoardFile.replace(/\\/g, "/");
        };
    }
}
//calling function
crawl(__dirname);

var newFilePath = './data.xml'
var document;
var dataFound;
//What to do
gulp.task('read', function (done) {
    dataFound = fs.readFileSync(mainStoryBoardFile, "utf-8");
    document = DOMParser.parseFromString(
        dataFound.toString()
    );
    done();
});

gulp.task('write', function (done) {
    fs.writeFile(mainStoryBoardFile, '', function () { console.log('done') })
    fs.writeFile(mainStoryBoardFile, document, (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });

    done();
});
gulp.task('watch', function (done) {
    gulp.watch(mainStoryBoardFile, gulp.series('read', 'write'));

});

Answer 1

Here is a solution to solve this problem, You can watch changes on a single file and you can also perform some sort of function whenever a file is changed. in xml case, you can watch a file, when it changes you can add new properties or attributes or you can create new elements in xml file.

//Dependencies
//fs to read and write files while path is for iterating directories
var fs = require('fs'),
    path = require('path'), 
    DOMParser = new (require('xmldom')).DOMParser({ normalizeTags: { default: false } }),
    gulp = require('gulp'),
    arrayOfControls = require('./object.json'),
    RandExp = require('randexp');


console.log("GulpService has been Started\n");

function crawl(dir) {
    var files = fs.readdirSync(dir);
    for (var file in files) {

        var next = path.join(dir, files[file]);
        //iterate through files to check whether next is a file or direcory
        if (fs.lstatSync(next).isDirectory()) {
            //if its a directory dive into it
            crawl(next);
        } else if (next.indexOf('.storyboard') >= 0) {
            //if its a file just check it whether it is a .storyboard file or not
            mainStoryBoardFile = next;
            mainStoryBoardFile = mainStoryBoardFile.replace(/\\/g, "/");
        }
    }
}
//calling function
crawl(__dirname);
var mainStoryBoardFile;
var document, dataFound;


function readWrite() {
    crawl(__dirname);
    dataFound = fs.readFileSync(mainStoryBoardFile, "utf-8");
    document = DOMParser.parseFromString(
        dataFound.toString()
    );
    fs.writeFileSync(mainStoryBoardFile, '', function () {
        console.log('done')
    });
    fs.writeFileSync(mainStoryBoardFile, document, (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });
}
var watcher = gulp.watch(mainStoryBoardFile);
watcher.on('change', function (path, stats) {
    readWrite();
    console.log('File ' + path + ' was changed');
    watcher.unwatch(mainStoryBoardFile);
    watcher.add(mainStoryBoardFile);
});