Run gulp task after NPM package install without any command

Question

I've developed a small angular package that is hosted on npmjs. when I try to install my package I want to change my "selector" name so that I have written one gulp task like below:

gulp.task('tag-change', function () {
 // var files = fs.readFileSync('./node_modules/@syncfusion/ej2-angular-buttons/@syncfusion/ej2-angular-buttons.es5.js', 'utf8');
 var files = glob.sync('./dist/@syncfusion/*');
 
 for (var i = 0; i < files.length; i++) {
 var sourceFile = fs.readFileSync(files[i],'utf8');
 sourceFile = sourceFile.replace(`selector: '[ejs-button]'`,`selector: '[KD-button]'`);
 fs.writeFileSync(files[i], sourceFile, 'utf8');
 }
});

I want to run this task after my package got installed. for this, I have analyzed and found that we can able to use npm postinstall.

Then i have tried like below:

 "dependencies": {
    "postinstall": "*"
  },
  "scripts": {
    "postinstall": "gulp tag-change",
    "packagr": "ng-packagr -p ng-package.json && gulp npmrc-changelog-schematics-injection && gulp path-change"
  }

But it throws below error:

I have referred this gulp task reference from this issue - Run gulp task after NPM package install

my package structure lokks like below:

Your post-install is working just fine, this error is related to the gulp and you should dig in that. No issues with the post-install script you have added in package.json. — Harry Joy, Oct 04 '19 at 12:22
Does this command runs successfully by its own `gulp tag-change --gulpfile ./tagchange.js` — Sathish, Oct 04 '19 at 12:23
I have tried like this also `"postinstall" : "gulp tag-change",` — Kumaresan Sd, Oct 04 '19 at 12:25
Can you please add debug logs on the gulp task. ? @kumaresan_sd for debugging. It seems very starting forward. — Sathish, Oct 04 '19 at 12:26
I never used that module, but `postinstall` you mentioned seems to require separate configuration, not just a command to run. Have you tried adding regular `postinstall` script, without any additional package? Npm supports both `pre*` and `post*` scripts: https://docs.npmjs.com/misc/scripts — ahwayakchih, Oct 04 '19 at 12:31

score 0 · Accepted Answer · answered Oct 05 '19 at 08:49

Finally, I found out a solution to achieve my requirements.

I have created a tagchange.js file and placed the below content.

var fs = require('fs');
var glob = require('glob');

var files = glob.sync('./@syncfusion/*');
 
 for (var i = 0; i < files.length; i++) {
 var sourceFile = fs.readFileSync(files[i],'utf8');
 sourceFile = sourceFile.replace(`selector: '[ejs-button]'`,`selector: '[Kumar-button]'`);
 fs.writeFileSync(files[i], sourceFile, 'utf8');
 }

And I have called this in my package package.json file like below:

  "dependencies": {
    "postinstall": "*"
  },
  "scripts": {
    "postinstall": "node ./tagchange.js",
    "packagr": "ng-packagr -p ng-package.json && gulp npmrc-changelog-schematics-injection && gulp path-change"
  }

It is working fine

score -2 · Answer 2 · answered Oct 06 '19 at 06:35

-2

gulp.task('tag-change', function () {
 // var files = fs.readFileSync('./node_modules/@syncfusion/ej2-angular-buttons/@syncfusion/ej2-angular-buttons.es5.js', 'utf8');
 var files = glob.sync('./dist/@syncfusion/*');
 
 for (var i = 0; i < files.length; i++) {
 var sourceFile = fs.readFileSync(files[i],'utf8');
 sourceFile = sourceFile.replace(`selector: '[ejs-button]'`,`selector: '[KD-button]'`);
 fs.writeFileSync(files[i], sourceFile, 'utf8');
 }
});

answered Oct 06 '19 at 06:35

Ravikant Sharma

1
1

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Alessio Oct 06 '19 at 06:57
i am not sure about your fix, what did you change? – Kumaresan Sd Oct 07 '19 at 06:15

Run gulp task after NPM package install without any command

2 Answers2

Linked