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

KnowTheCode/UpGulp: A Gulp Starter for your WordPress project

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

开源软件名称(OpenSource Name):

KnowTheCode/UpGulp

开源软件地址(OpenSource Url):

https://github.com/KnowTheCode/UpGulp

开源编程语言(OpenSource Language):

JavaScript 99.2%

开源软件介绍(OpenSource Introduction):

UpGulp

UpGulp is our gulp module. It contains all of the configuration, setup, and tasks for processing themes, plugins, and whatever else.

Features

It's modular. Shocking, I know. But navigating one big-butt gulpfile.js is a pain in the backside.

Instead, we split our gulp tasks out in the assets/gulp/tasks folder. The main file gulpfile.js then loads up all of the configuration (which is stored in config/gulp/config.js), plugins, and requirements. Then it calls each of the tasks. Think of it as your Controller or better yet, Task Manager.

It includes:

  • Scripts
    • Concatentates all the scripts found in assets/js/*.js
    • Renames the combined file with a .min suffix
    • Minifies that file
    • And then stores it into the configured distribution folder, default is assets/dist/
    • You can name the file whatever you want via the Configuration file
  • Styles
    • Uses gulp-sourcemaps - for debug ease
    • Loads in both Bourbon and Neat
    • Process with gulp-sass
    • Runs postcss
    • Includes sass-rem
    • Autoprefix to ensure we get the cross-browser prefixes
    • Includes linting using gulp-sass-lint
    • Copy and rename the full stylesheet with a .min suffix
    • It minifies to optimize the stylesheet
    • If this is a theme, then it moves both the .css and .min.css files to the root of the theme folder.
  • Translations
    • i18n translations are included (NEEDS TESTING)
  • Sprites and icons optimizations
  • Imagine optimizations

Sass Features

This gulp starter has Bourbon, Neat, and Sass REM baked into it. To use these in your style.scss file and project, do the following:

@import 'bourbon';
@import 'neat';
@import '../../node_modules/sass-rem/rem';

REM is being deprecated out of Bourbon. Using the sass-rem module lets us import the functionality we want. To convert pixels into rems, add the following into your Sass declaration:

@include rem( font-size, 18px );

You can learn more about the syntax in the documentation;

Installation:

  1. Open up terminal and navigate to the theme, plugin, or proper folder.
  2. Then type: git clone https://github.com/KnowTheCode/UpGulp.git. The repository is loaded into a new subfolder called UpGulp.
  3. Now it's time to move the contents of UpGulp folder into the root of your plugin or theme.
    • Move gulpfile.js, package.json, config/gulp, and assets/gulp
    • Move these resources into the root of your theme or plugin
  4. Type npm install. It will automatically install all of the modules specified in the package.json file.
  5. Change the configuration parameters in the variable moduleSettings as found in config/gulp/config.js. You will want to change:
    • moduleSettings.package -> change to the package's name
    • moduleSettings.domain -> change to the domain name
    • moduleSettings.isTheme -> If this is a theme, then set it to true.
    • moduleSettings.i18n -> Define the i18n parameters

Run it

To run it, open terminal and type gulp watch. There are various watchers available including:

  • gulp scripts
  • gulp styles
  • gulp sprites
  • gulp i18n
  • gulp icons
  • gulp imagemin

Credit

This gulp setup is inspired by WebDev Studio's setup.

Contributions

All feedback, bug reports, and pull requests are welcome.

TODOs

There are things we need to improve and test in this starter module including:

  • Automate the installation process
  • Test sprites and translations



鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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