Propellerとは？
Material Designに対応したBootstrap用デザインテンプレート。
使ってみよう
前提条件
初めての人は、以下のコマンドを叩いてグローバルにgulpとbowerを入れてください。
$ npm install -g gulp bower
フォルダの作成
「public/js」となるようなフォルダを作ります。
$ mkdir public
$ cd public
$ mkdir js
npmの準備
$ npm init
でアプリ名等々を設定した後、
$ npm install --save-dev gulp gulp-concat gulp-rename gulp-less gulp-minify-css gulp-uglify gulp-filter gulp-bower-files main-bower-files
で必要なモジュールをインストール
BowerでPropellerをインストール
bower.jsonが指定されていたのでbowerから頂く。
$ bower install https://github.com/digicorp/propeller.git --save
※ 「--save」を忘れるとbower.jsonができないので注意。
VSCodeを起動
$ code .
gulpfile.jsを作成
偉大なる先人からコードを頂く
http://chaika.hatenablog.com/entry/2015/08/24/182004
{
"name": "propeller",
"version": "0.0.4",
"homepage": "http://propeller.in/",
"authors": [
"Digicorp, Inc"
],
"description": "Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.",
"main": [
"dist/js/propeller.js",
"dist/css/propeller.css"
],
"keywords": [
"css",
"js",
"mobile-first",
"responsive",
"front-end",
"framework",
"web"
],
"license": "MIT",
"ignore": [
"archive",
"templates",
"components/*/snippets/**"
],
"dependencies": {
"bootstrap": "^3.0.0",
"jquery": "^1.9.0"
}
}
このままではうまくいかないのでこうする
/bower_components/propeller/bower.jsonを変更する。
"main":
[
"dist/js/propeller.js",
"dist/css/propeller.min.css"
]
,
タスクランナ―の設定
VSCodeで「Ctrl + Shift + B」を押下すると、task.jsonの作成を促されるので作成。
以下のように設定します。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [{
"taskName": "default",
"args": [],
"isBuildCommand": true,
"problemMatcher": "$msCompile"
}]
}
「Ctrl + Shift + B」を再度押下でビルドできます。
こんな感じでpublic/jsに_bundle.jsが出力されていればOK。
ではコーディング
public/index.htmlを作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/_bundle.css">
<script type="text/javascript" src="./js/_bundle.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<h2>bootstrap button</h2>
<button type="button" class="btn btn-success"> Success </button >
<h2>Propeller button</h2>
<button type="button" class="btn pmd-ripple-effect btn-success"> Success </button >
</div>
</body>
</html>
実行のための準備
index.jsを記載
var connect = require("connect");
var serveStatic = require('serve-static');
var app = connect();
var _port = process.env.PORT || 3000;
app.use(serveStatic('./public'));
app.listen(_port);
端末を開き、
$ npm install --save connect serve-static
$ node index.js
ブラウザで「localhost:3000」にアクセス。
できた！
ちゃんとRipple Effectに対応していることを確認しましょう。