Start writing frontend (stwr-frontend)

Cấu Trúc File

├──  dist folder
├──  src folder 
│   └──  assets
│       └──  fonts
│       └──  images
│       └──  js
│       └──  php
│       └──  scss
│           └──  components
│           └──  custom
│                └──  pages 
│                └──  plugins                
│                └──  strucure 
│           └──  style.scss
│   │
│   └──  Partials
│       └──  All partials Files
│   │   
│   └──  All HTML Files
│
└──  gulpfile.js
└──  package.json
└──  tailwind.config.js
└──  closure-compiler.js
└──  javascript-obfuscator.js
└──  obfhtml.js

Chức Năng Của Từng File

gulpfile.js cấu hình cho những task của gulpfile để thực hiện chức năng : copy file từ src vào dist, mã hóa file js, làm sạch file css

package.json lưu chữ những thư viện cần và 1 số lệnh viết tắt để chạy

tailwind.config.js cấu hình của tailwind

closure-compiler.js nodejs chạy riêng mã hóa file js của closure-compiler có tích hợp sẵn trong gulp, ngoài ra trong gulp còn có dùng gulp-uglify nhưng được ẩn đi

javascript-obfuscator.js nodejs mã hóa và làm rối javascript, hiện tại chỉ làm sạch và min lại các name function, các biến

obfhtml.js nodejs để làm rối class name của css và class name của html. lưu ý : khi chạy sẽ tạo ra thư mục json-obfuscator/main.json là file lưu chữ map làm rối

Nếu đang phát triển thì chạy lệnh npx gulp

Nếu xuất file thành phẩm thì chạy npx gulp build && node obfhtml.js

Viết Mã

Sử dụng nhiều các thuộc tính của gulp-file-include [![Gitter][gitter-img]][gitter-url]

Như nhúng file

<!DOCTYPE html>
<html>
  <body>
  @@include('./view.html')
  @@include('./var.html')
  </body>
</html>

Vòng lặp

<ul>
@@for (var i = 0; i < arr.length; i++) {
  <li>`+arr[i]+`</li>
}
</ul>

Truyền biến

<!DOCTYPE html>
<html>
  <body>
  @@include('./view.html')
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  </body>
</html>

<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

Điều kiện

@@include('some.html', { "nav": true })

@@if (name === 'test' && nav === true) {
  @@include('test.html')
}

`loop` statement

index.html

<body>
  @@loop('loop-article.html', [
    { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
    { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
    { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
  ])
</body>

loop-article.html

<article>
  <h1>@@title</h1>
  @@text
</article>

`loop` statement + data.json

data.json

[
  { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
  { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
  { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
]

loop-article.html

<body>
  @@loop("loop-article.html", "data.json")
</body>

`webRoot` built-in context variable

The webRoot field of the context contains the relative path from the source document to the source root (unless the value is already set in the context options).

example

support/contact/index.html

<!DOCTYPE html>
<html>
  <head>
    <link type=stylesheet src=@@webRoot/css/style.css>
  </head>
  <body>
    <h1>Support Contact Info</h1>
    <footer><a href=@@webRoot>Home</a></footer>
  </body>
  </body>
</html>

and the result is:

<!DOCTYPE html>
<html>
  <head>
    <link type=stylesheet src=../../css/style.css>
  </head>
  <body>
    <h1>Support Contact Info</h1>
    <footer><a href=../..>Home</a></footer>
  </body>
  </body>
</html>

alothietkeweb / stwr-frontend Goto Github PK

stwr-frontend's Introduction

Start writing frontend (stwr-frontend)

Cấu Trúc File

Chức Năng Của Từng File

Viết Mã

Như nhúng file

Vòng lặp

Truyền biến

Điều kiện

loop statement

loop statement + data.json

webRoot built-in context variable

example

stwr-frontend's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs

`loop` statement

`loop` statement + data.json

`webRoot` built-in context variable