Official Website Framework 
中文文档
It is a fast, simple yet fully featured and very efficient official website framework for Gulp + Html + Jquery + Sass.
-
Suitable for all major browsers and support mobile browsing.
-
Using
gulpscript, separation of development and build. Such as Sass automatically converted to a CSS file. -
Using
browser-sync, to achieve hot deployment after code modification in development. -
Using
gulp-file-include, import a common Layout in html, avoid code duplication. Such as Nav, Footer Layout. -
Using
gulp-uglify, to compress JS files; Usinggulp-cssnano, compression CSS file. Reduce file size and speed up network request -
Using
gulp-rev, to achieve automatically add the hash value of the file at the end of the file name to solve the browser cache problem. Such as CSS, JS, Img, Json and so on. -
Using
$.getjsonto access Json file, to achieve the acquisition of site dynamic data, without back-end development.
-
js file: src/js/
-
css files: src/css/ (css file extensions can use scss or css)
-
img image: src/img/
-
Common components: src/components/
-
Dynamic site data: src/moke/**/*.json
-
Temp dir: .tmp/
-
Publish dir: .dist/
-
Set the page horizontally at 1200px as the edit area. Advantages: Automatically adapt to the mobile browser.
Sample page layout:
<div class="g-section"> <div class="g-section-content"> </div> </div>
-
The 'head', 'nav', 'footer' in different pages belong to repeated code, which is realized by the '@@include' technology.
The 404 page code, So Simple 💎 :
<!DOCTYPE html> <html> <head> @@include('component/header/header.html') <link rel="stylesheet" type="text/css" href="css/404.css"> </head> <body> @@include('component/nav/nav.html') <div class="g-section" style="background-color: #F4F6FD; padding-bottom: 120px; padding-top: 195px; text-align: center;"> <img src="img/common/404.png" style="width: 413px;"> <p style="color:#333333; font-size: 12px; margin-top: 10px;">很抱歉，您访问的页面不存在</p> <div class="g-section-content" style="text-align: center; margin: 0 auto; padding-top: 36px;"> <a href="index.html" class="back-index">返回首页</a> </div> </div> @@include('component/footer/footer.html') </body> </html>
-
Globally install Node Download Node installation package.
-
Globally install gulp-cli.
npm -g install gulp-cli
-
Run
npm installin the Official-Website-Framework root directory to download the three-party libraries that the project depends on. -
Run
npm run devto automatically open the browser and access the template site.
-
Execute
npm run publishto publish all site files which generated in the .dist directory. -
Install apache on the web server. Such as, run
apt install apacheon Linux. -
Access 'ip:80' in the browser. If the default apache page is displayed, so the apache installation is successful.
-
Apache is automatically installed by command, the configuration file is in the
/etc/nginxdirectory,sites-available/defaultis the configuration file of the default apache page published, pointing to the web service directory/var/www/html. After adding the 404 page configuration to the default configuration file, executenginx -s reload.server { listen 80 default_server; listen [::]:80 default_server; # add 404 pape config error_page 404 /404.html; } -
Run
sh deploy.shto upload the contents of the .dist directory to the '/var/www/html' directory of the web server. -
Access 'ip:80' and publish it successfully.
Css Animation: Cross-browser Animations Lib
Caniuse: provides up-to-date browser support for web technologies