• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

agragregra/optimizedhtml-start-template: OptimizedHTML is all-inclusive, optimiz ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

agragregra/optimizedhtml-start-template

开源软件地址(OpenSource Url):

https://github.com/agragregra/optimizedhtml-start-template

开源编程语言(OpenSource Language):

JavaScript 36.4%

开源软件介绍(OpenSource Introduction):

OptimizedHTML - Start HTML Template

Start HTML Template

Author: WebDesign Master | Manual in Russian

OptimizedHTML is all-inclusive, optimized for Google PageSpeed start HTML5 template with Bootstrap (grid only), Gulp, Sass, Browsersync, Autoprefixer, PostCSS, Uglify, gulp-imagemin, Vinyl-FTP, rsync and Bower (libs path) support. The template contains a .htaccess file with caching rules for web server.

OptimizedHTML Start Template uses the best practices of web development and optimized for Google PageSpeed.

The template uses a Sass with Sass syntax and project structure with source code in the directory app/ and production folder dist/, that contains ready project with optimized HTML, CSS, JS and images.

How to use OptimizedHTML

  1. Download optimizedhtml-start-template from GitHub
  2. Install WSL (for Windows): https://webdesign-master.ru/blog/tools/wsl-nodejs-new.html
  3. Install Node Modules in project folder: npm i
  4. Run the template: gulp

Gulp tasks:

  • gulp: run default gulp task (sass, js, watch, browserSync) for web development;
  • build: build project to dist folder (cleanup, image optimize, removing unnecessary files);
  • deploy: project deployment on the server from dist folder via FTP;
  • rsync: project deployment on the server from dist folder via RSYNC;
  • clearcache: clear all gulp cache.

Rules for working with the starting HTML template

  1. All HTML files should have similar initial content as in app/index.html;
  2. For installing new JS library, just run the command "bower i plugin-name" in the terminal. Libraries are automatically placed in the folder app/libs. Bower must be installed in the system (npm i -g bower). Then place all JS libraries paths in the js() task (gulpfile.js);
  3. All custom JS located in app/js/common.js;
  4. All Sass vars placed in app/sass/_vars.sass;
  5. All Fonts placed in app/sass/_fonts.sass with "_mixins/font-face" mixin
  6. All Bootstrap media queries placed in app/sass/_media.sass;
  7. All JS libraries CSS styles placed in app/sass/_libs.sass;



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
scalableminds/gulp-gm: Image manipulation with gm发布时间:2022-06-21
下一篇:
li2568261/gulp-multipage: 基于gulp的一款多页面开发工具发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap