Proopeller 테스트

Proopeller란 무엇입니까?

Material Design용 Bootstrap용 디자인 템플릿

한번 써보세요.

전제 조건

처음 하는 사람은 다음 지령으로 전화를 걸어 전 세계에서glop과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로 Properler 설치

bower.json을 지정했기 때문에 bower에서 얻을 수 있습니다.

$ bower install https://github.com/digicorp/propeller.git --save

※ "-save"를 잊으면 bower가 됩니다.조심해.

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.변경

  "main": 
    [
      "dist/js/propeller.js",
      "dist/css/propeller.min.css"
    ]
  ,

작업 수행자 설정

VScode에서 "Ctrl+Shift+B"를 누르면task.제이슨 제작을 재촉받아 제작했다.
다음과 같이 설정합니다.javascript
{
// 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를 다시 눌러 구성할 수 있습니다.

이런 느낌으로.bundle.js만 출력하면 OK.

그럼 인코딩

public/index.생성 >
```html

Document

bootstrap button

Success

Propeller button

Success
```

실행하기 위한 준비

index.기재
```javascript
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가 지원되는지 잘 확인해 보십시오.