node grunt
本文旨在向您介绍一些使用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版本。
列出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
咕unt任务剖析
通常,您首先定义构建任务,例如从我前面提到的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
node grunt