开发效率加倍! Jade,Stylus,CoffeeScript的介绍和用法

很高兴见到你,卡鲁内是。

我是一名自由网页工程师。我们在围绕HTML,CSS,Javascript,Ruby on Rails,Wordpress,AWS开展工作。

顺便说一下,这次,我们将讨论编码网站时所需的三种语言:HTML,CSS和Javascript,例如Jade,Stylus和CoffeeScript。扩展语言我将介绍如何提高开发效率。

此外,这次使用终端应用程序(如Mac上的iTerm),Node.js环境,npm(节点程序包管理器)是必需的。

准备(Node.js,npm)

首先,作为初步准备,我们将构建Node.js(n)和npm的环境。对于那些不知道的人,我将简要解释这些术语。

Node.js:运行Javascript引擎的服务器应用程序的环境
n:管理Node.js的多个版本,并在需要使用不同版本的Node.js时轻松切换。它很复杂,但是它是由Node.js制作的,我将在↓中使用npm对其进行介绍。
npm:用于安装使用Node.js制作的各种程序包(包括Jade,Stylus,CoffeeScript编译器)(节点程序包管理器)

这项准备工作不是重点,因此我将略去。

Node.js和npm的介绍

这次,我将在我的环境(Mac OS X El Capitan(10.11.2)和Homebrew)中进行解释。

Node.js官方网站单击“ v5.7.0稳定”按钮,然后下载文件“ node-v5.7.0.pkg”。

js01

打开下载的pkg文件,然后按照安装程序的说明完成安装。

js02

启动终端(在我的情况下为iTerm)

$ node -v
$ npm -v

执行后,如果输出如下,则表示成功。

js03

n的介绍

在航站楼

$ npm install -g n
$ n -V

(-G是全局的,机器范围的选项)

js04

您应该看到类似上面的内容(n -V是n的版本检查)。这样就完成了安装。

如何使用

在航站楼

$ n

当您执行命令时(简短)

js05

屏幕看起来像这样。如果安装了多个版本的Node.js,将看到已安装版本的列表。图像左侧的浅蓝色“ o”表示当前设置的Node.js版本号。目前只有一个版本,因此有点混乱,但是您可以通过按Ctrl-C退出此屏幕。

至此,准备工作已经完成。根据操作系统,操作系统版本和各种其他环境的不同,在这种安装工作中可能会发生意料之外的问题。幸运的是,根据操作系统和环境的不同,网络上有很多关于Node.js和npm引入的文章,因此,如果在引入时遇到任何麻烦,请检查一下。

玉?手写笔?CoffeeScript?

现在,让我们首先解释这三种扩展语言是什么以及使用它们的好处是什么。

它是什么?

简而言之,这三种扩展语言是``组合生成HTML,CSS和Javascript''。

因此,如果您编译Jade,它将转换为HTML;如果您编译Stylus,它将转换为CSS;如果您编译CoffeeScript,则它将转换为Javascript。

使用的好处

您可能会想:“编译起来很麻烦,编写它的速度不是更快吗?”,但是开发中有一个非常方便的地方。
那是

  • 您可以使用比原始语言(HTML,CSS,Javascript)更短的表示法来编写,从而可以加快开发速度。
  • 您可以(在某种程度上)防止使用原始语言书写时发生的书写错误

那是。我认为通过查看实际代码更容易理解这一领域。让我们从下一章开始写。

Jade入门

js06

如果您编写了HTML,则可能会忘记关闭标签或在关闭标签时出错。玉石可以防止这种错误。

您也可以使用它将要共享的部分分成另一个文件,并从另一个文件中包含它。

安装

确保可以在终端中使用npm命令并运行以下命令

$ npm install -g jade

然后,将使用以下输出安装jade及其相关软件包。

js07
$ jade --version

键入以确认显示版本号(两个连字符)。

js08

您现在准备好了。

翡翠基础

接下来,创建一个名为index.jade的文件,并在编辑器中将其打开。在哪里创建文件都没有关系。

现在将以下代码复制到index.jade中&ペーストしましょう。

doctype html
html(lang="ja")
 head
  meta(charset="utf-8")
  title サイトタイトル
 body
  h1#title メインタイトル
  h2.sub-title サブタイトル
  .wrapper
   a(href="http://google.co.jp" title=”Google”) Google

刚开始阅读时可能会有些困难,但是您会逐渐习惯它。然后在终端中转到index.jade所在的目录

$ jade index.jade --pretty

请执行命令(--pretty是使生成的html易于阅读的选项。

js09

然后,我认为index.html是在与index.jade相同的级别生成的,并带有类似于上述屏幕截图的消息。生成的html文件

<!DOCTYPE html>
<html lang=”ja”>
 <head>
  <meta charset=”utf-8″>
  <title>サイトタイトル</title>
 </head>
 <body>
  <h1 id=”title”>メインタイトル</h1>
  <h2 class=”sub-title”>サブタイトル</h2>
  <div class=”wrapper”>
   <a href=”http://google.co.jp”>Google</a>
  </div>
 </body>
</html>

看起来像这样。此处生成的html文件符合HTML语法,因此,如果使用Web浏览器打开它,则可以毫无问题地显示它。

翡翠符号

正确的html文件是从一个非常短的玉文件生成的。接下来,让我们简要解释一下此示例中使用的Jade符号。

  • 附上标签名称“<」「>没必要
  • 无需结束标签
  • 嵌套结构由缩进定义
  • CSS选择器(id,class)可以用CSS表示法(#,.)编写。
  • 该属性是“(()”中的“属性名称=””値”以“((如果有多个,请用空格和隔开。”(属性1 =”値1″ 属性2=”値2″)」のように書く
  • div标签的标签名称可以省略
  • 将标签中的文本写在末尾

以上是翡翠符号的基础。仅此一项就使它大大缩短了。还有其他有用的符号,但是这次不只是介绍。

如果你感兴趣,翡翠官网 我想你应该检查一下。

关于编译

对于那些说“保存玉石然后一个接一个地执行编译命令的人来说很麻烦!”

$ jade index.jade --pretty --watch

当您执行该命令时,它将处于“监视index.jade文件并在更改后立即以易于阅读的格式生成html文件”的状态。

js10

按Ctrl-C退出。
进一步

$ jade . --pretty --watch

当您执行该命令时,它将处于“监视执行该命令的目录下的jade文件,并在更改后立即以易于阅读的格式生成html文件的状态”。现在,您可以编辑jade文件,而不必一一编译。

js11

触控笔入门

js12

接下来是Stylus,一种CSS扩展语言。

与Jade一样,Stylus可以开发得更短,更方便,同时避免了原始语言(CSS)的常见书写错误。

例如

  • 我忘了在句子末尾输入呼吸({})或分号
  • 这很困难,因为选择器的长度越来越长!
  • 一次打开过滤器以测量图像的宽度和高度很麻烦

它解决了这个问题。

我认为SCSS(Sass)作为CSS的扩展语言而闻名,但是Ruby环境对于引入SCSS(Sass)是必不可少的。由于本文中的Jade和CoffeeScript依赖于Node.js包,因此这次我们将介绍Stylus,它依赖于Node.js作为CSS扩展语言。

安装

执行以下命令。

$ npm install -g stylus

与Jade一样,将安装Stylus及其相关软件包,并完成命令执行。

js13
$ stylus --version

键入并检查是否显示了版本号。

js14

您现在准备好了。

触控笔基础知识

接下来,创建一个名为style.styl的文件(Stylus的扩展名为.styl,因此有点混乱),然后在编辑器中将其打开。在哪里创建文件都没有关系。

现在将以下代码复制到style.styl中&ペーストしましょう。

body
 width 100%
 background-color #fff

 .box
  padding 10px
  position absolute
  top 0px

  for i in (1..5)
   &:nth-child(i)
    left i * 40px

然后在终端中转到style.styl所在的目录

$ stylus style.styl

请执行命令。

js15

我认为在与style.styl相同的级别上生成了一个名为style.css的文件,该文件的输出类似于上图。生成的css文件

body {
  width: 100%;
  background-color: #fff;
}
body .box {
 padding: 10px;
 position: absolute;
 top: 0px;
}
body .box:nth-child(1) {
 left: 40px;
}
body .box:nth-child(2) {
 left: 80px;
}
body .box:nth-child(3) {
 left: 120px;
}
body .box:nth-child(4) {
 left: 160px;
}
body .box:nth-child(5) {
 left: 200px;
}

看起来像这样。

与Jade一样,输出的CSS文件也以CSS的良好表示法编写,因此您可以通过从html文件中调用样式来正确应用样式。

手写笔符号

到目前为止,对于编写CSS的人可能并不熟悉。但是,CSS表示法的规则已被尽可能多地删除,并且通过以程序样式编写来简化了重复,因此设计该标记法是为了减少粗心的错误。

让我们简要解释一下这种表示法。

  • 无需呼吸({})
  • 嵌套结构由缩进定义
  • 选择器可以嵌套以提高可见性
  • 您无需在描述CSS属性及其值的语句中编写冒号或分号。
  • 易于以(1..5)中的i的形式重复
  • 当嵌套伪元素(:before和:after)和伪类(:nth-​​child和:first-child)时&:before、&:nth-childのようにする。
  • 您可以使用四个规则(也可以将CSS与calc()函数一起使用)

就这些。就个人而言,嵌套选择器和简化重复只会减少描述的数量,这非常有帮助。

StylusにはJade以上に便利な機能があり、全てを把握するのはとても大変だと思います。もし興味を持たれた方はJade同様、公式サイト[http://stylus-lang.com/]で調べてみてはいかがでしょうか。

关于编译

像Jade一样,Stylus不必一一编译。

$ stylus style.styl --watch

您可以使用该命令来监视特定文件中的更改并自动对其进行编译。

js16
$ stylus --watch

您可以使用命令监视命令执行目录下.styl文件中的更改。

js17

CoffeeScript简介

js18

最后是CoffeeScript。与Jade和Stylus不同,CoffeeScript具有很强的书写习惯,并且编译后的可读代码很少,但是我认为开发速度会更快,更方便。

顺便说一句,用于创建Web应用程序的著名框架“ Ruby on Rails”使用CoffeeScript作为标准,我认为在ECMAScript 6被用作标准之前,它仍然是一种功能强大的扩展语言。

安装

确保可以在终端中使用npm命令并运行以下命令

$ npm install -g coffee-script

与Jade和Stylus一样,将显示以下消息,并且命令将完成。
js19

$ coffee --version

键入并检查是否显示了版本号。

js20

您现在准备好了。

CoffeeScript基础

接下来,创建一个名为main.coffee的文件,并在编辑器中将其打开。在哪里创建文件都没有关系。

现在将以下代码复制到main.coffee中&ペーストしましょう。

@onload = ->
 count = 1
 obj =
  hoge: ‘fuga’
  foo: ‘bar’
 @onclick = (e) ->
  alert “#{count++}回目のクリックです”

然后在终端中转到main.coffee所在的目录

$ coffee --compile main.coffee

请执行命令。
没有显示任何特定消息,但是我认为在与main.coffee相同的级别上生成了一个名为main.js的文件。生成的js文件是

// Generated by CoffeeScript 1.10.0
(function() {
 this.onload = function() {
  var count, obj;
  count = 1;
  obj = {
   hoge: ‘fuga’,
   foo: ‘bar’
  };
  return this.onclick = function(e) {
   return alert((count++) + "回目のクリックです");
  };
 };

}).call(this);

看起来像这样。对于通常编写Javascript的人来说,这可能是一些陌生的代码。但是,通过从html调用,可以看到单击屏幕时显示了警报窗口,并且每次单击的次数都增加了。

CoffeeScript表示法

语法的变化远不及Jade和Stylus,但是一旦习惯了,就会发现它非常方便。

让我们在编译之前简要解释一下代码的符号。

  • 在句子结尾声明变量或分号时无需var
  • 没有呼吸阻塞({}),它由缩进定义
  • 声明关联数组时不需要呼吸,并且元素可以通过换行符而不是逗号分隔。
  • 调用函数时不需要()(编写函数无关紧要)
  • 这可以写为@
  • 関数宣言は「func = (arg) ->」のように書くことができる(@onload = ->のように、引数がない場合は(arg)は省略可能です)
  • 带变量的字符串连接可以写成“”#{val}文本“”,而不是“ val +'text'”
  • 就这些。以下是编译后的代码。

  • 整个代码都包含在立即函数中,现在使用此(窗口)作为参数来调用(这是因为Javascript仅具有全局作用域和函数作用域,因此CoffeeScript不会污染其他作用域。在侧面自动完成)
  • 该函数返回最后执行的语句的返回值(因此,如果要返回另一个值,则需要在CoffeeScript端显式返回它)。

就这些。毕竟,我有一个强烈的习惯,需要习惯它,但是一旦我习惯了,我认为会有很多人发现CoffeeScript更易于阅读和编写。

当然,除了此处为CoffeeScript编写的语法外,还有很多语法,我认为有很多代码无法通过这次解释的内容来实现。我会在这篇文章中省略它,因为它会很长,但是如果您也对此感兴趣的话官方网站请检查。

关于编译

CoffeeScript自动编译与Jade和Stylus有点不同

$ coffee --watch --compile main.coffee

使用命令更改监视和自动编译

$ coffee --watch --compile .

您可以使用命令监视命令执行目录下.coffee文件中的更改。

最后

起动库存照片

怎么样?

我认为有很多新手不熟悉的符号,但是通过引入这三种扩展语言,可以大大减少开发过程中编写的代码量,并可以减少小错误。

我认为,如果突然引入这三种方法,则学习成本会很高,因此建议一一引入。

撰写本文的人

かるね

我于2012年加入一家有趣的公司Kayak,自2016年以来一直是自由职业者。 HTML / CSS / Javascript / Ruby on Rails / Wordpress / AWS等@ c67n9v6l9