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

agragregra/WinterCMS-Gulp-Starter: Gulp Starter for Winter CMS Theme Development

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

开源软件名称(OpenSource Name):

agragregra/WinterCMS-Gulp-Starter

开源软件地址(OpenSource Url):

https://github.com/agragregra/WinterCMS-Gulp-Starter

开源编程语言(OpenSource Language):

JavaScript 70.1%

开源软件介绍(OpenSource Introduction):

Winter CMS Gulp Starter

Lightweight optimized Gulp starter for Winter CMS theme development with Gulp 4, Webpack-stream, Babel, Browsersync, Sass, autoprefixer, rsync and more based on OptimizedHTML 5 practices.

Optober Gulp

Installation

Run this command in the root directory of you site with remove all unnecessary (one command):

git init .; git remote add -f origin https://github.com/agragregra/WinterCMS-Gulp-Starter; git checkout master; git clone https://github.com/agragregra/WinterCMS-Gulp-Starter .; rm -rf trunk .gitignore readme.md .git

If no result, run the command twice.

Winter CMS Theme Directory structure

Recommends using the following base directory structure for you theme:

themes/
— mytheme/               <= Theme starts here
— — pages/               <= Pages directory
— — — home.htm
— — layouts/             <= Layouts directory
— — — default.htm
— — partials/            <= Partials directory (Optional)
— — — header.htm
— — — footer.htm
— — content/             <= Content directory
— — — intro.htm
— — assets/              <= Assets directory
— — — styles/            <= Styles directory
— — — — sass/            <= Preprocessor directory (sass, less, styl)
— — — — — theme.sass     <= Main theme style src file
— — — — — blocks/        <= Parts of styles (auto include to theme.*)
— — — css/
— — — — theme.min.css    <= Minified styles
— — — js/
— — — — theme.js         <= Main JavaScript src file
— — — — theme.min.js     <= Minified scripts
— — — images/
— — theme.yaml

Features & Variables in gulpfile.js

  1. Make proxy for live development with Browsersync - let localhost
  2. Simple selection of preprocessor - let preprocessor (sass, less or styl)
  3. Simple selection of current theme - let theme
  4. Simple selection of file extensions to watch & reload - let fileswatch
  5. Better CSS - sass, less, styl, gulp-clean-css, gulp-autoprefixer.
    Importing framework extras CSS into "{theme}/assets/styles/{preprocessor}/theme.*" file
  6. Better JS - Webpack+Babel. Best javascript practices.
  7. Better deploy with gulp-rsync

Exported Gulp Task

  • scripts - Bundling & minify with Webpack + Babel
  • styles - Compile and concat CSS with selected preprocessor
  • deploy - deploy changes on server with gulp-rsync
  • assets - Compile assets (CSS & JS)
  • gulp - The default command to start the environment



鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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