人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

gulp-riotで.tagファイルのプリコンパイルやSCSS、JSの圧縮などを行う

gulpというタスクランナーで Riot.js をプリコンパイルして使う方法の紹介です。SCSSやJSの圧縮なども一緒にできるように設定していきます。

.tagファイルのプリコンパイル


npm i gulp -D
npm i gulp-riot -D

Node.js は導入済みとします。gulp と gulp-riot をインストールします。


const gulp = require('gulp'),
      riot = require('gulp-riot');

gulp.task('riot', function() {
  gulp
    .src('*.tag')
    .pipe(riot())
    .pipe(gulp.dest('./'));
});

gulpfile.js を作成し、このように記述します。


gulp riot

あとは、コマンドを打てば .tag ファイルがコンパイルされます。

SCSSのコンパイル


<sample>
  <p>This is { sample }</p>

  <style type="scss">
    :scope {
      &:hover {
        color: blue;
        font-size: 2em;
      }
    }
  </style>

  <script>
    this.sample = 'サンプル';
  </script>
</sample>

Riot.jsはデフォルトで SCSS のコンパイルに対応しています。style タグの type 属性に scss と指定すれば .tag ファイルのコンパイル時に、一緒にコンパイルしてくれます。

SCSSを圧縮してコンパイル


npm i node-sass -D

先ほどの方法では圧縮することはできないので、node-sass を使うことにします。


<sample>
  <p>This is { sample }</p>

  <style>
    :scope {
      &:hover {
        color: blue;
        font-size: 2em;
      }
    }
  </style>

  <script>
    this.sample = 'サンプル';
  </script>
</sample>

.tag ファイルは先ほどと異なり、type="scss" を付けてはいけないので注意してください。


const gulp = require('gulp'),
      riot = require('gulp-riot'),
      scss = require('node-sass');

gulp.task('riot', function() {
  gulp
    .src('*.tag')
    .pipe(riot({
      style: 'scssmin', // CSS圧縮関数を指定↓
      parsers: {
        css: {
          scssmin: function(tag, css) {  // node-sassを使って圧縮する関数
            var result = scss.renderSync({
              data: css,
              outputStyle: 'compressed'
            });
            return result.css.toString();
          }
        }
      }
    }))
    .pipe(gulp.dest('./'));
});

gulpfile.js には node-sass を使って圧縮する処理を追加します。

HTMLやJSも圧縮して結合


npm i gulp-concat -D
npm i gulp-uglify -D

JSの圧縮と結合 を行うためのプラグインをインストールします。


const gulp = require('gulp'),
      riot = require('gulp-riot'),
      scss = require('node-sass'),
      concat = require('gulp-concat'),
      uglify = require('gulp-uglify');

gulp.task('riot', function() {
  gulp
    .src('*.tag')
    .pipe(riot({
      compact: true,    // HTML圧縮
      style: 'scssmin', // CSS圧縮関数を指定↓
      parsers: {
        css: {
          scssmin: function(tag, css) {  // node-sassを使って圧縮する関数
            var result = scss.renderSync({
              data: css,
              outputStyle: 'compressed'
            });
            return result.css.toString();
          }
        }
      }
    }))
    .pipe(uglify({      // JS圧縮
      output: {
        comments: /^!/  // /*!または//!で始まるコメントはそのまま残す設定
      }
    }))
    .pipe(concat('script.js'))  // 1つのJSファイルに結合
    .pipe(gulp.dest('./'));
});

圧縮などを全部まとめるとこんな感じになります。

CSS本執筆しました！！！