StarterKit is our gulp module. It contains all of the configuration, setup, and tasks for processing.

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 app/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
  • Concatenates all the scripts found in app/js/*.js
  • Renames the combined file with a .min suffix
  • Minifies that file
  • And then stores it into the configured distribution folder, default is dist/
  • You can name the file whatever you want via the Configuration file
• Styles
  • Uses gulp-sourcemaps - for debug ease
  • 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

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

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

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;

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 app/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

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

• gulp scripts
• gulp styles
• gulp sass-lint
• gulp sass-doc
• gulp sprites
• gulp i18n
• gulp icons
• gulp imagemin
• gulp watch

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

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

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

• Automate the installation process
• Test sprites and translations