Riot.js를 화폐 변환기로 하다

Riot.js의 간단한 화폐 변환기를 사용합니다.Browserify에서 미리 컴파일한 샘플을 만들어 보았다.Yahoo!에서 현재 통화 환율을 가져오고 표시합니다.변동분 검색을 수행할 수 있습니다.(곰곰이 생각해 보니 변환기도 아니다.)
※ 이 기사는 여기. 일본어판 내용입니다.

시험해 보다

GiitHub Pages에 놓였습니다.방문하십시오Riot.js Currency Calculator.

클론 및 구축

손 옆에서 테스트를 하려면 아래 절차를 따라 진행하세요.

클론이 저장소

$ npm install

$ npm start

Gulp 및 Browserify

이 예에서 몇 개의 gulp 임무를 정의했다.

clean: 생성된 파일 삭제

browserify: .js, 컴파일.tag 파일

css: autoprefix 및 미니 파일

others: index.html 등 상기 이외의 파일의 이동

Browserify 기본 사용 방법

riotify에서 .tag 파일을 컴파일할 수 있습니다.참고로 .tag 파일은 라이터가 사용하는 템플릿과 스크립트로 구성되어 있습니다.

gulp.task 'browserify', ->
  browserify
    entries: [$.app]
    debug: true
  .transform riotify
  .bundle()
  .pipe source path.basename $.app
  .pipe buffer()
  .pipe gulp.dest $.dist

실제로 상술한 것 외에 원도와 압축도 필요하다.자세한 내용은 gulpfile.coffee를 참조하십시오.

CSS *-processors

Riot.js는 CSS 프리프로세싱/포스트 프로세서를 지원하지 않습니다.

CSS 사전 처리기: LESS 또는 Sass

CSS 포스트 프로세서: autooprefixer

CSS import, compression, lint, ...기타

그러나 다음과 같은 방법으로 CSS 프로세서를 사용할 수 있습니다.

<style>...</style>의 부분은 browserify 작업에서 무시

<style>...</style>의 섹션을 css 작업에서 추출style.cssに 및 추가

이를 위해 사용할 수 있는 조수가 몇 명 있다.

transformify

transformify는 지정된 함수를 통해 텍스트를 처리할 수 있는 변압기다.여기서는 인도riotify 전에 삭제<style>...</style>합니다.

transformify (tag) ->
  tag.replace /<style>[\s\S]*<\/style>/gm, ''`

gulp-replace

.tab 파일에서 <style>...</style> 섹션을 추출하여 다른 CSS와 결합합니다.

replace /(^[\s\S]*<style>|<\/style>[\s\S]*$)/gm, ''`

CSS를 원본 파일에 쓰거나 쓰지 않음

서류로 쓰면 전망이 좋아질 거야.스타일과 스크립트가 길어지고 전체 이미지를 분별하기 어려워지면 구성 요소를 분리해야 할 수도 있습니다.1 파일에서 HTML, CSS, JavaScript를 간단명료하게 정리하는 것이 가장 이상적이다.

<item>

<span class="title">{ opts.title }</span>
<span class="price">{ opts.price }</span>
<span class="usd">= 1 USD</span>

<style>
  item {
    display: block;
    border-bottom: 1px dotted #ddd;
    background: white;
    line-height: 2em;
    padding: 0 7%;
  }
</style>

</item>

하지만 리오.js 단일체로 말하자면 지금...

CSS 프로세서는 사용할 수 없음

중복 요소 중 동일<style>

라고 질문했다.
따라서 상술한 소개 방법을 취하거나 처음부터 CSS를 다른 문서에 쓰는 것은 당분간 현실적이다.