在 NPM 包安装后运行 gulp 任务，无需任何命令

Posted 2023-03-07

【中文标题】在 NPM 包安装后运行 gulp 任务，无需任何命令

【英文标题】：Run gulp task after NPM package install without any command

【发布时间】：2020-02-02 18:52:33

【问题描述】：

我开发了一个托管在 npmjs 上的小型 Angular 包。当我尝试安装我的包时，我想更改我的“选择器”名称，以便我编写了一个如下所示的 gulp 任务：

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');
 
);

我想在我的包安装后运行这个任务。为此，我分析了一下，发现可以使用npm postinstall。

然后我尝试如下：

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

但它会抛出以下错误：

我已经从这个问题中提到了这个 gulp 任务参考 - Run gulp task after NPM package install

我的包结构如下所示：

【问题讨论】：

sudo npm install --unsafe-perm --unsafe-per 标志

您的安装后工作正常，此错误与 gulp 有关，您应该深入研究。您在 package.json 中添加的安装后脚本没有问题。

这个命令是不是自己运行成功的gulp tag-change --gulpfile ./tagchange.js

嗨@Raymond，你能描述更多细节吗

嗨@Sathish，是的

【参考方案1】：

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');
 
);

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

我不确定你的修复，你做了什么改变？

【参考方案2】：

最后，我找到了满足我要求的解决方案。

我创建了一个tagchange.js 文件并放置了以下内容。

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');
 

我在我的包package.json 文件中调用了它，如下所示：

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

一切正常