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本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs