Node，Grunt，Bower和Yeoman –现代Web开发人员的工具包

最新推荐文章于 2024-04-29 21:50:55 发布

danpu0978

最新推荐文章于 2024-04-29 21:50:55 发布

阅读量187

点赞数

文章标签： vue python java javascript js ViewUI

本文旨在向您介绍一些使用JavaScript开发现代Web应用程序时当前最受欢迎的工具。这些完全不是新事物，已经存在了两年。尽管如此，我发现许多开发人员仍然不使用或不了解它们（可能如此），因此本文试图为您提供一个快速，简洁的介绍，以帮助您入门。

节点和NPM

Node.js将JavaScript带入服务器和桌面。最初，JavaScript主要用作基于浏览器的语言，而现在，您可以使用Node使用Node -webkit创建服务器端后端甚至是桌面应用程序（对于其中的疯狂用户）。

Node.js®是基于ChromeJavaScript运行时构建的平台，可轻松构建快速，可扩展的网络应用程序。 Node.js使用事件驱动的非阻塞I / O模型，使其轻巧高效，非常适合跨分布式设备运行的数据密集型实时应用程序。
nodejs.org

创建Web服务器就像这两行代码一样简单。

 var http = require( 'http' );  http.createServer(function (req, res) { 
   res.writeHead( 200 , { 'Content-Type' : 'text/plain' }); 
   res.end( 'Hello World\n' );  }).listen( 1337 , '127.0.0.1' );  console.log( 'Server running at http://127.0.0.1:1337/ ' );

要运行它，执行：

 $ node start  Server running at http: //172.0.0.1:1337/

关于node的伟大之处之一是它的热情社区，它在NPM目录（Node的包管理器）上创建并发布所谓的node模块 。目前，大约有大约90.000个模块，上个月有大约390.000个下载。

除了创造与节点服务器端应用程序，这也成为了VMJavaScript开发工具，如minifiers，代码棉短绒等两种，呻吟，约曼（本文中介绍）是基于节点的基础设施。

有关nodejs.org和npmjs.org的更多信息。

安装节点

因此，要开始使用，您必须首先安装Node运行时。最好的方法是从官方网站下载所需的软件包。这还将在您的计算机上自动安装NPM。

完成后，输入。

 $ node -v

..进入您的终端应该输出节点的已安装版本，从而确认您已准备就绪。

安装节点软件包

安装节点软件包只需执行以下命令即可：

 $ npm install grunt

这会将grunt节点软件包安装到名为node_modules的文件夹中。

不过，最佳做法是创建一个package.json文件。由于建议的方法不是将node_modules文件夹的内容提交到VCS，而是在构建过程中自动重新安装它们，因此需要一个地方来跟踪已安装的软件包及其相应版本： package.json 。

要创建一个新的package.json文件，只需在一个干净的文件夹内执行npm init即可。您将不得不回答一些问题，但最终您将获得一个不错的新软件包配置文件。

每当您安装新软件包时，都可以使用--save或--save-dev选项将软件包持久保存到package.json文件中。例如，执行…

 $ npm install --save-dev grunt

…将自动在软件包配置文件的devDependencies部分添加grunt ：

 { 
   ... 
   "devDependencies" : { 
     "grunt" : "^0.4.5" 
   }  }

同样，如果添加--save则将其添加到“ dependencies部分。区别主要在于， dependencies在您的应用程序中被积极使用，并且应与其一起部署。另一方面， devDependencies是您在应用程序开发期间使用的工具，通常不需要与它一起部署。示例包括代码压缩器脚本，测试运行器等。

要卸载软件包，请使用。

 $ npm uninstall --save-dev grunt

..这将卸载grunt并将其从package.json删除。

恢复包

如前所述，您通常不将node_modules文件夹提交到VCS。因此，当您作为开发人员或构建服务器从VCS检索源代码时，就需要以某种方式还原软件包。这是package.json文件再次起作用的地方。通过将其放在根目录中，执行。

 $ npm init

..指示NPM读取配置文件中的依赖项，并使用指定的版本还原它们。

版本控制

NPM软件包使用语义版本控制。

给定版本号MAJOR.MINOR.PATCH，增加：

当您进行不兼容的API更改时的主要版本，
以向后兼容的方式添加功能时的MINOR版本，并且
进行向后兼容的错误修复时的PATCH版本。

http://semver.org/

列出package.json每个软件包及其相应的版本和升级行为。您可以使用以下方案：

1.3.5 ：
告诉npm完全使用此给定版本的软件包（限制性最强）。
~1.3.5或1.3.x ：
告诉npm仅升级给定软件包以获得补丁程序版本的增量（通常只是错误修正）。 NPM将其定义为~1.3.5 := >=1.3.5-0 <1.4.0-0 。
^1.3.5 ：
告诉npm它可以升级到小于下一个主要发行版的任何版本： <2.0.0 。这是安装节点软件包时的新默认行为（在~之前）。 NPM将其定义为1.3.5 := >=1.3.5-0 <2.0.0-0 。
latest或* ：
告诉npm始终更新到最新版本（不推荐）。

凉亭

对于Web浏览器来说， Bower就是对Node.js的NPM。它是jQuery，Bootstrap等前端开发库的软件包管理器。

您通过NPM将Bower安装为全局软件包（显然）

 $ npm install -g bower

然后，与使用NPM相似，您在终端上执行bower init以创建一个新的bower.json配置文件（对于NPM来说是package.json的等效文件）。

安装软件包与NPM相同。

 $ bower install --save jquery

您还可以通过附加jquery#1.9.1下载特定版本。注意，-- --save （或-S ）选项将依赖项添加到bower.json配置文件中。安装的软件包将放置在bower_components目录中。建议不要将其提交到您的VCS（就像node_modules目录一样）。

要卸载软件包，只需使用：

 $ bower uninstall --save jquery

特别有趣的是，Bower允许您从任何git存储库甚至是纯URL安装软件包。

 $ bower install git:/github.com/user/ package .git

要么

 $ bower install http: //example.com/script.js

如果您需要一些更高级的配置，例如更改依赖关系目录的名称或其位置，则可能需要使用放置在项目目录结构根目录下的.bowerrc配置文件。有关可用配置选项的更多信息，请访问官方网站。

我在Medium上找到了另一篇不错的文章，它快速介绍了Bower ，您可能还想看看。

约曼

Yeoman已成为创建现代JavaScript应用程序的事实上的标准脚手架工具包。

Yeoman围绕着由Yeoman团队（官方发电机）或开放源代码社区开发的发电机构建。约曼本身基本上只是提供构建和运行这些发电机的基础设施。

Yeoman帮助您启动新项目，规定最佳实践和工具以帮助您保持生产力。
从官方网站

这种方法的优点是：

您可以快速掌握最新信息。使用适当的工具和开发人员支持来创建项目设置会花费您大量时间，并且需要专业知识。
您不必一定要了解市场上当前可用的所有最佳实践工具。 Yeoman会为您组装它们，您可以立即上手。然后，一旦获得更多专业知识，就可以调整Yeoman的配置，使其更适合您的项目需求。
这是您学习很多新工具的好方法。

Yeoman及其生成器作为节点模块分布。只需在全局安装：

 $ npm install -g yo

然后找到您的发电机（即angular ）并使用以下命令进行安装。

 $ npm install -g generator-angular

最后，在项目目录中执行生成器以创建一个新应用。

 $ yo angular [app-name]

这将创建初始支架，然后您可以从中开始构建应用程序。但是Yeoman更进一步，根据您使用的生成器，您还可以在开发时生成单个组件，例如Angular控制器，指令等。

 $ yo angular:controller user

这就是关于Yeoman的用法。更高级的主题是有关创建自己的自定义生成器的信息。只需研究文档，因为它们非常详细。

咕unt声

咕unt是自动化 。它是用于JavaScript项目的基于任务的命令行构建工具。官方标题：“ JavaScript Task Runner”。

要开始使用，只需遵循官方网站上的在线指南。还有一本很棒的书，由PacktPub出版，是Grunt入门– JavaScript Task Runner ，非常适合初学者。

安装

Grunt在Node.js平台上运行，并通过npm存储库进行分发。它有两种不同的工具：

grunt-cli是Grunt命令行界面
grunt模块

之所以拥有两个组件，是为了确保我们可以并排运行不同的grunt版本（例如，旧项目中的旧版本）。因此， grunt-cli是全局安装的，而grunt是按每个项目安装的。

 $ npm install -g grunt-cli

然后输入要使用Grunt的项目并执行：

 $ npm install grunt

Gruntfile.js

Gruntfile.js是您为项目配置Grunt任务的地方。它的开始与此文件一样简单：

 module.exports = function(grunt) { 
   // Do grunt-related things in here  };

grunt对象是Grunt的API ： http : //gruntjs.com/api/grunt 。它允许您与Grunt进行交互，以注册任务并调整其配置。

咕unt声模块

Grunt模块通过Node的NPM目录分发。通常，它们的前缀为grunt-而正式的grunt插件的前缀为grunt-contrib 。示例： grunt-contrib-uglify 。

因此，Grunt模块是节点模块，因此您就像我之前展示的那样安装它们。

 $ npm install --save-dev grunt-contrib-uglify

咕tasks任务剖析

通常，您首先定义构建任务，例如从我前面提到的Grunt书中获取的stringCheck任务的示例。

 module.exports = function(grunt){ 
   ... 
   grunt.initConfig({ 
     stringCheck: { 
       file: './src/somefile.js' , 
       string: 'console.log(' 
     } 
   });  }

如您所见，任务只是您在Grunt中注册的功能。

 module.exports = function(grunt){ 
   grunt.registerTask( 'stringCheck' , function() { 
     //fail if configuration is not provided 
     grunt.config.requires( 'stringCheck.file' ); 
     grunt.config.requires( 'stringCheck.string' ); 
     //retrieve filename and load it 
     var file = grunt.config( 'stringCheck.file' ); 
     var contents = grunt.file.read(file); 
     //retrieve string to search for 
     var string = grunt.config( 'stringCheck.string' ); 
     if (contents.indexOf(string >= 0 )) 
       grunt.fail.warn( '"' + string + '" found in "' + file + '"' ); 
     });  }

注意，必须首先加载通过NPM从外部下载的任务，然后才能在您的Gruntfile.js 。这是通过在grunt对象上使用loadNpmTasks完成的。

 module.exports = function(grunt){ 
   grunt.loadNpmTasks( 'grunt-contrib-concat' ); 
   ...  }

为了不必为您使用的每个任务（可能很多）执行此操作，您可能需要使用load-grunt-tasks插件，并在以下位置执行require('load-grunt-tasks')(grunt) Gruntfile.js的开头。这将自动加载所有准备使用的grunt模块。

多任务

Grunt还允许您按以下方式对任务执行进行分组：

 module.exports = function(grunt){ 
   ... 
   grunt.initConfig({ 
     stringCheck: { 
       target1: { 
         file: './src/somefile.js' , 
         string: 'console.log(' 
       }, 
       target2: { 
         file: './src/somefile.js' , 
         string: 'eval(' 
       } 
     } 
   });  }

然后可以使用grunt stringCheck:target1和runt stringCheck:target2执行它们。 target1和target2可以（并且应该）以不同的方式命名。

乱语

文件通配符或通配符匹配是一种使用单个表达式捕获大量文件的方法，而不是单独列出所有文件的方法，这通常是不可能的。从官方文档：

*匹配任意数量的字符，但不匹配/
? 匹配单个字符，但不匹配/
**匹配任意数量的字符，包括/ ，只要它是路径部分中唯一的字符
{}允许以逗号分隔的“或”表达式列表
! 模式开始时会否定匹配

大多数人需要知道的是foo/*.js .js将匹配foo/子目录中所有以.js结尾的文件，但是foo/**/*.js .js将匹配foo/ 子目录中所有以.js结尾的文件， 并且它的所有子目录 。

由于大多数任务最终都会与文件系统交互，因此Grunt已经预先配置了一种结构，可以简化任务开发人员的工作。如果指定了全局扩展，则Grunt会尝试将其与文件系统进行匹配，并将所有匹配项放入Grunt任务函数内的this.files数组中。
因此，您将看到许多任务的语法如下：

 target1: { 
   src: [ 'src/a.js' , 'src/b.js' ]  }

要么

 target1: { 
   src: `src/{a,b}.js`, 
   dest: `dest/ab.js`  }

还可以根据目的地定义多个源集。为此，使用files数组。

 target1: { 
   files: [ 
     { src: 'src/{a,b,c}.js' , dest: 'dest/abc.js' }, 
     { src: 'src/{x,y,z}.js' , dest: 'dest/xyz.js' } 
   ]  }

以下更紧凑的对象表示法是等效的：

 target1: { 
   files: { 
     'dest/abc.js' : 'src/{a,b,c}.js' , 
     'dest/xyz.js' : 'src/{x,y,z}.js' 
   }  }

另一个常见任务是将一组文件复制到给定目录（例如，使用SASS或CoffeeScript编译器之类的预处理器）。除了提供单个src和dest指令外，我们可以使用以下语法：

 target2: { 
   files: [ 
     { 
       expand: true , 
       cwd: 'lib/' , 
       src: '**/*.js' , 
       dest: 'build/' , 
       ext: '.min.js' 
     }, 
   ],  }

expand属性告诉Grunt为每个匹配的文件生成一个对应的目的地。 cwd代表当前工作目录， src和dest是自解释性的， ext是用于目标文件的扩展名。更多选项可以在官方文档中找到。

运行任务

最终，您的目标是执行您定义的Grunt任务。如果您还记得的话，您以前是全局安装的grunt-cli工具，现在可以使用它运行任务。

 $ grunt task1 task2

如果您有多目标任务，请使用:进行指定。

 $ grunt task:target1

如果您运行$ grunt ，则将执行默认任务 ，您可以按以下方式进行配置：

 module.exports = function(grunt) { 
   grunt.registerTask( 'build' , function() { 
     console.log( 'building...' ); 
   }); 
   grunt.registerTask( 'test' , function() { 
     console.log( 'testing...' ); 
   }); 
   grunt.registerTask( 'default' , [ 'build' , 'test' ]);  };

有了这个Gruntfile.js配置执行build和test ，当你键入grunt到您的console.gulp。

古尔普

如果不提及Gulp，则此介绍将是不完整的。 Gulp是在Node.js流之上构建JavaScript任务运行程序新手。它的目的是通过“优先于配置而不是配置”来使构建脚本更易于使用（与基于配置的Grunt不同）。

gulp对流和配置代码的使用使构建更简单，更直观。
gulpjs.com

我尚未对其进行详细研究，但是您应该密切关注它，因为它正在Swift发展并且越来越受欢迎。目前，我不会提供更多详细信息，但是，一旦我仔细研究了它，我肯定会更新本文。

翻译自: https://www.javacodegeeks.com/2014/08/node-grunt-bower-and-yeoman-a-modern-web-devs-toolkit.html

danpu0978

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node，Grunt，Bower和Yeoman –现代Web开发人员的工具包

本文旨在向您介绍一些使用JavaScript开发现代Web应用程序时当前最受欢迎的工具。这些完全不是新事物，已经存在了两年。尽管如此，我发现许多开发人员仍然不使用或不了解它们（可能如此），因此本文试图为您提供一个快速，简洁的介绍，以帮助您入门。节点和NPM Node.js将JavaScript带入服务器和桌面。最初，JavaScript主要用作基于浏览器的语言，而现在，您可以使用...
复制链接

扫一扫