使用 grunt 自动化 npm 和 bower 安装

关键词：

【中文标题】使用 grunt 自动化 npm 和 bower 安装【英文标题】：Automate npm and bower install with grunt 【发布时间】：2012-12-19 10:47:02 【问题描述】：

我有一个节点/角度项目，它使用 npm 进行后端依赖管理，使用 bower 进行前端依赖管理。我想使用 grunt 任务来执行这两个安装命令。我一直不知道该怎么做。

我尝试使用exec，但它实际上并没有安装任何东西。

module.exports = function(grunt) 

    grunt.registerTask('install', 'install the backend and frontend dependencies', function() 
        // adapted from http://www.dzone.com/snippets/execute-unix-command-nodejs
        var exec = require('child_process').exec,
            sys  = require('sys');

        function puts(error, stdout, stderr)  console.log(stdout); sys.puts(stdout) 

        // assuming this command is run from the root of the repo
        exec('bower install', cwd: './frontend', puts);
    );

;

当我 cd 进入前端时，打开 node，并从控制台运行此代码，这工作正常。我在 grunt 任务中做错了什么？

（我也尝试使用 bower 和 npm API，但也无法使用。）

【问题讨论】：

我的配置相同，想知道你是如何运行npm install的？以同样的方式？还是有其他方法？ 【参考方案1】：

您需要通过调用 this.async() 方法、获取回调并在 exec 完成时调用它来告诉 grunt 您正在使用异步方法 (.exec)。

这应该可行：

module.exports = function(grunt) 
    grunt.registerTask('install', 'install the backend and frontend dependencies', function() 
        var exec = require('child_process').exec;
        var cb = this.async();
        exec('bower install', cwd: './frontend', function(err, stdout, stderr) 
            console.log(stdout);
            cb();
        );
    );
;

见Why doesn't my asynchronous task complete?

【讨论】：

【参考方案2】：

仅供参考，这是我现在的位置。

你也可以用另一种方式解决这个问题，即让 npm 处理 bower 的执行，并最终让 grunt 处理 npm。见Use bower with heroku。

grunt.registerTask('install', 'install the backend and frontend dependencies', function() 
    var async = require('async');
    var exec = require('child_process').exec;
    var done = this.async();

    var runCmd = function(item, callback) 
        process.stdout.write('running "' + item + '"...\n');
        var cmd = exec(item);
        cmd.stdout.on('data', function (data) 
            grunt.log.writeln(data);
        );
        cmd.stderr.on('data', function (data) 
            grunt.log.errorlns(data);
        );
        cmd.on('exit', function (code) 
            if (code !== 0) throw new Error(item + ' failed');
            grunt.log.writeln('done\n');
            callback();
        );
    ;

    async.series(
        npm: function(callback)
            runCmd('npm install', callback);
        ,
        bower: function(callback)
            runCmd('bower install', callback);  
        
    ,
    function(err, results) 
        if (err) done(false);
        done();
    );
);

【讨论】：

【参考方案3】：

完成这项工作的 Grunt 任务（根据上面 Sindre 的解决方案）：

https://github.com/ahutchings/grunt-install-dependencies

【讨论】：

【参考方案4】：

要在npm install 期间安装客户端组件而不是服务器端库，您可以添加package.json

"dependencies": 
    ...
    "bower" : ""
,
"scripts": 
    ...
    "postinstall" : "bower install"

我更喜欢区分安装和测试/构建

【讨论】：

最精简的解决方案，以及明确分离构建和开发设置关注点，无需添加额外的 grunt 任务别名，或需要向我的项目添加额外的文档。太棒了，谢谢！ 最美味的......干净利落 如此简单！如此简单。这是迄今为止最优雅的解决方案。谢谢 "postinstall" : "bower install" 在这种情况下也可以工作，因为 node_modules/.bin 被添加到 PATH 环境变量中。 npm 在运行脚本时添加它，因此它可以在任何地方运行【参考方案5】：

执行 bower install 命令的 Grunt 任务： https://github.com/yatskevich/grunt-bower-task

另外，你可以使用 https://github.com/stephenplusplus/grunt-bower-install

自动将你的依赖注入到 index.html 文件中

【讨论】：

Grunt、NPM 和 Bower 之间的区别（ package.json 与 bower.json ）

...wer.json)【发布时间】：2014-02-0713:19:51【问题描述】：我是使用npm和bower的新手，我在emberjs中构建了我的第一个应用程序:)。我确实对rails有点经验，所以我熟悉列出依赖项的文件的想法（例如 查看详情

设置 nvm 以正确使用 npm 和 grunt

】设置nvm以正确使用npm和grunt【英文标题】：Setupnvmtoproperlyworkwithnpmandgrunt【发布时间】：2014-11-1307:35:50【问题描述】：我对Web应用程序开发有点陌生，并且浏览了Yeoman教程，该教程使用了yo、grunt、bower和angular。我曾使用自制软... 查看详情

sh系统，git，gitlfs，npm，grunt，bower和ngrok的bash函数和别名(代码片段)

查看详情

Grunt、Gulp.js 和 Bower 有啥区别？为啥以及何时使用它们？

】Grunt、Gulp.js和Bower有啥区别？为啥以及何时使用它们？【英文标题】：WhatarethedifferencesbetweenGrunt,Gulp.jsandBower?Why&whentousethem?Grunt、Gulp.js和Bower有什么区别？为什么以及何时使用它们？【发布时间】：2016-03-2103:27:52【问题描述... 查看详情

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]

】NPMvs.Bowervs.Browserifyvs.Gulpvs.Gruntvs.Webpack[关闭]【英文标题】：NPMvs.Bowervs.Browserifyvs.Gulpvs.Gruntvs.Webpack[closed]【发布时间】：2017-06-2009:42:00【问题描述】：我正在尝试总结我对最流行的JavaScript包管理器、捆绑器和任务运行器的了解... 查看详情

使用 grunt、bower、node 模块部署到 heroku

】使用grunt、bower、node模块部署到heroku【英文标题】：Deployingtoherokuwithgrunt,bower,nodemodules【发布时间】：2014-08-2311:15:00【问题描述】：我正在向heroku部署一个平均应用程序，并且正在使用bower和grunt。我应该在gitrepo中包含我的节点... 查看详情

什么是bower

...装Git，bower从远程git仓库获取代码包:git简易指南安装bower使用npm，打开终端，输入：npminstall-gbower 查看详情

bower入门教程

...装Git，bower从远程git仓库获取代码包:git简易指南安装bower使用npm，打开终端，输入：npminstal 查看详情

grunt入门

...nt对JS文件的检测，以及js和css文件的合并，压缩，是前端自动化压缩构建项目的得力助手。接下来就随lizimeme一起学习grunt的基本使用  我的电脑安装了nodejs,自动全局安装了npm(npm是随同NodeJS一起安装的包管理工具)第一步... 查看详情

bower（和 npm）版本语法是啥？

...发布时间】：2013-10-0212:51:15【问题描述】：Bower使我能够使用以下语法指定软件包的版本要求："dependencies":"<name>":"<version>",,但我无法找到&lt;version&gt;使用的 查看详情

npm和bower之间的区别

...wer，你就不用自己去找jQuery文件了，通过配置文件就可以自动完成了。　（二）关键在于npm的依 查看详情

bower

...源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt，这个会在以后的文章中介绍。2.Bower是Web开发中的一个前端文件包管理器。类似于Node模块的npm包管理器，它允许开发者为服务器编写可共享的模块。Bower为Web组件提供... 查看详情

如何使用 Bower 保持 Twitter Bootstrap 自定义？

...问题描述】：我正在与yeoman合作一个项目，其中包括用于自动化的grunt和用于客户端包管理的bower。我的项目的依赖项之一是SASStwitter-bootstrap。在我手动管理依赖更新的其他项目中，我直接 查看详情

grunt-grunt使用(代码片段)

Grunt是前端的构建工具，类似后端使用的Ant，也是通过配置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的，npm是nodejs 的包管理器，所以第一步需要安装nodejs环境。安装grunt之前... 查看详情

grunt压缩html和css

一句话:就是自动化,对于需要反复的任务,例如压缩,编译,单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在Gruntfile文件确定配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作.下面咱们来... 查看详情

gulp和grunt的区别

...的构建结构类似的Java项目而出现的Maven。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。而如今前端提到构建工具会自然想起Grunt。Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里，Grunt.js... 查看详情

bower程序包管理器与npm的对比及handlebars包的使用实例

1、bower:专门为前端表现设计的程序包管理器，类似npm，主要用于前端优化。bower可以管理包含HTML，CSS，JavaScript，字体甚至是图像文件的组成部分。bower并没有做别的事-它仅仅安装你需要的包及其依赖的正确版本。2、**依赖node环... 查看详情

node,yeoman,bower,grunt的简介及安装

...基本的html，css，js已经不太够用了，所以要学习一些前端自动化工具，来提高我们的生产力1、NodeJS先安装NodeJS，直接去官网，下载最新的版本，一定要最新的版本，这样会避免很多的坑。下载完成后在命令行中输入node-v显node示... 查看详情