├── .gitignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── assets
    ├── dist
    │   └── index.php
    ├── gulp
    │   ├── index.php
    │   ├── tasks
    │   │   ├── i18n.js
    │   │   ├── icons.js
    │   │   ├── imagemin.js
    │   │   ├── scripts.js
    │   │   ├── sprites.js
    │   │   ├── styles.js
    │   │   └── watch.js
    │   └── utils
    │   │   └── handleErrors.js
    ├── images
    │   └── index.php
    ├── index.php
    ├── js
    │   └── index.php
    └── sass
    │   └── index.php
├── config
    ├── gulp
    │   └── config.js
    └── index.php
├── gulpfile.js
├── index.php
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Unit tests config
 2 | phpunit.xml
 3 | .travis.yml
 4 | /bin
 5 | tests/mocks/env/
 6 | 
 7 | 
 8 | # Sass cache
 9 | .sass-cache/
10 | 
11 | # Development files
12 | /node_modules
13 | /assets/vendor/
14 | 
15 | .idea/


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 1.0.3 (11.July.2017)
 2 | 
 3 | - Fixed [bug #1](https://github.com/KnowTheCode/UpGulp/issues/1) to disable `cleanStyles()` when the package is not theme.
 4 | - Passing in `settings` to each function in `gulp/tasks/styles.js` for consistency.
 5 | 
 6 | ## 1.0.2
 7 | 
 8 | - DocBlock cleanup
 9 | 
10 | ## 1.0.1
11 | 
12 | - distFilename configuration added
13 | 
14 | ## 23.Oct.2016
15 | 
16 | Initial release.


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | GNU General Public License 2.0+
 2 | 
 3 | This program is free software; you can redistribute it and/or
 4 | modify it under the terms of the GNU General Public License
 5 | as published by the Free Software Foundation; either version 2
 6 | of the License, or (at your option) any later version.
 7 | 
 8 | This program is distributed in the hope that it will be useful,
 9 | but WITHOUT ANY WARRANTY; without even the implied warranty of
10 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 | GNU General Public License for more details.
12 | 
13 | You should have received a copy of the GNU General Public License
14 | along with this program; if not, write to the Free Software
15 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # UpGulp
 2 | 
 3 | UpGulp is our gulp module.  It contains all of the configuration, setup, and tasks for processing themes, plugins, and whatever else.
 4 | 	 	
 5 | ## Features
 6 | 
 7 | It's modular. Shocking, I know.  But navigating one big-butt `gulpfile.js` is a pain in the backside.  
 8 | 
 9 | 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.
10 | 
11 | It includes:
12 | 
13 | - Scripts
14 |     - Concatentates all the scripts found in `assets/js/*.js`
15 |     - Renames the combined file with a `.min` suffix
16 |     - Minifies that file
17 |     - And then stores it into the configured distribution folder, default is `assets/dist/`
18 |     - You can name the file whatever you want via the Configuration file
19 | - Styles
20 |     - Uses [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) - for debug ease
21 |     - Loads in both [Bourbon](https://www.npmjs.com/package/bourbon) and [Neat](https://www.npmjs.com/package/bourbon-neat)
22 |     - Process with [gulp-sass](https://www.npmjs.com/package/gulp-sass)
23 |     - Runs [postcss](https://www.npmjs.com/package/postcss)
24 |     - Includes [sass-rem](https://www.npmjs.com/package/sass-rem)
25 |     - [Autoprefix](https://github.com/postcss/autoprefixer) to ensure we get the cross-browser prefixes
26 |     - Includes linting using [gulp-sass-lint](https://www.npmjs.com/package/gulp-sass-lint)
27 |     - Copy and rename the full stylesheet with a `.min` suffix
28 |     - It minifies to optimize the stylesheet
29 |     - If this is a theme, then it moves both the `.css` and `.min.css` files to the root of the theme folder.
30 | - Translations
31 |     - i18n translations are included (NEEDS TESTING)
32 | - Sprites and icons optimizations
33 | - Imagine optimizations    
34 | 
35 | ### Sass Features
36 | 
37 | 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:
38 | 
39 | ```
40 | @import 'bourbon';
41 | @import 'neat';
42 | @import '../../node_modules/sass-rem/rem';
43 | ```
44 | 
45 | 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:
46 | 
47 | `@include rem( font-size, 18px );`
48 | 
49 | You can learn more about the syntax in the [documentation](https://www.npmjs.com/package/sass-rem#scss); 
50 | 
51 | ## Installation:
52 | 
53 | 1. Open up terminal and navigate to the theme, plugin, or proper folder.
54 | 2. Then type: `git clone https://github.com/KnowTheCode/UpGulp.git`.  The repository is loaded into a new subfolder called UpGulp.
55 | 3. Now it's time to move the contents of `UpGulp` folder into the root of your plugin or theme.
56 |     - Move `gulpfile.js`, `package.json`, `config/gulp`, and `assets/gulp`
57 |     - Move these resources into the root of your theme or plugin
58 | 4. Type `npm install`.  It will automatically install all of the modules specified in the `package.json` file.
59 | 5. Change the configuration parameters in the variable `moduleSettings` as found in `config/gulp/config.js`. You will want to change:
60 |     - `moduleSettings.package` -> change to the package's name
61 |     - `moduleSettings.domain` -> change to the domain name
62 |     - `moduleSettings.isTheme` -> If this is a theme, then set it to `true`.
63 |     - `moduleSettings.i18n` -> Define the i18n parameters
64 | 
65 | ### Run it
66 |     
67 | To run it, open terminal and type `gulp watch`.  There are various watchers available including:
68 |     
69 | - `gulp scripts`
70 | - `gulp styles`
71 | - `gulp sprites`
72 | - `gulp i18n`
73 | - `gulp icons`
74 | - `gulp imagemin`
75 | 
76 | ## Credit
77 | 
78 | This gulp setup is inspired by [WebDev Studio's setup](https://github.com/WebDevStudios/wd_s/blob/master/Gulpfile.js).
79 | 
80 | ## Contributions
81 | 
82 | All feedback, bug reports, and pull requests are welcome.
83 | 
84 | ## TODOs
85 | 
86 | There are things we need to improve and test in this starter module including:
87 | 
88 | - Automate the installation process
89 | - Test sprites and translations
90 | 


--------------------------------------------------------------------------------
/assets/dist/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/assets/gulp/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/assets/gulp/tasks/i18n.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * i18n.js - Builds the internationalization files
 3 |  *
 4 |  * @package     UpGulp
 5 |  * @since       1.0.0
 6 |  * @author      hellofromTonya
 7 |  * @link        https://KnowTheCode.io
 8 |  * @license     GNU-2.0+
 9 |  */
10 | 
11 | 'use strict';
12 | 
13 | module.exports = function ( gulp, plugins, config ) {
14 | 
15 | 	var handleErrors = require( config.gulpDir + 'utils/handleErrors.js' );
16 | 
17 | 	/**
18 | 	 * The tasks are synchronous to ensure the order is maintained and
19 | 	 * avoid any potential conflicts with the promises.
20 | 	 *
21 | 	 * @since 1.0.0
22 | 	 */
23 | 	return function () {
24 | 		clean();
25 | 	};
26 | 
27 | 	/**
28 | 	 * Delete the .css before we minify and optimize
29 | 	 */
30 | 	function clean() {
31 | 		var settings = config.i18n.clean;
32 | 
33 | 		plugins.del( settings.src ).then( function () {
34 | 			plugins.util.log( plugins.util.colors.bgGreen( 'Scripts are now clean....[clean()]' ) );
35 | 			pot();
36 | 		} );
37 | 	};
38 | 
39 | 	function pot() {
40 | 		var settings = config.i18n.pot,
41 | 			wpPot = require( 'gulp-wp-pot' );
42 | 
43 | 		return gulp.src( settings.src )
44 | 
45 | 		           // Deal with errors.
46 | 		           .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
47 | 
48 | 		           .pipe( plugins.sort() )
49 | 		           .pipe( wpPot( settings.wppot ) )
50 | 		           .pipe( gulp.dest( settings.dest ) ).on( 'end', function () {
51 | 						plugins.util.log( plugins.util.colors.bgGreen( 'Translations are now done....[i18n:pot()]' ) );
52 | 					} );
53 | 	}
54 | };


--------------------------------------------------------------------------------
/assets/gulp/tasks/icons.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * scripts.js - Builds the distribution JavaScript and jQuery files
 3 |  *
 4 |  * @package     UpGulp
 5 |  * @since       1.0.0
 6 |  * @author      hellofromTonya
 7 |  * @link        https://KnowTheCode.io
 8 |  * @license     GNU-2.0+
 9 |  */
10 | 
11 | 'use strict';
12 | 
13 | module.exports = function ( gulp, plugins, config ) {
14 | 
15 | 	var handleErrors = require( config.gulpDir + 'utils/handleErrors.js' );
16 | 
17 | 	/**
18 | 	 * The tasks are synchronous to ensure the order is maintained and
19 | 	 * avoid any potential conflicts with the promises.
20 | 	 *
21 | 	 * @since 1.0.0
22 | 	 */
23 | 	return function () {
24 | 		clean();
25 | 	};
26 | 
27 | 	/**
28 | 	 * Delete the .css before we minify and optimize
29 | 	 */
30 | 	function clean() {
31 | 		var settings = config.icons.clean;
32 | 
33 | 		plugins.del( settings.src ).then( function () {
34 | 			plugins.util.log( plugins.util.colors.bgGreen( 'Icons are now clean....[clean()]' ) );
35 | 			svg();
36 | 		} );
37 | 	};
38 | 
39 | 	/**
40 | 	 * Minify, concatenate, and clean SVG icons.
41 | 	 *
42 | 	 * @since 1.0.0
43 | 	 *
44 | 	 * @return {*}
45 | 	 */
46 | 	function svg() {
47 | 		var settings = config.icons.svg;
48 | 
49 | 		return gulp.src( settings.src )
50 | 
51 | 		           // Deal with errors.
52 | 		           .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
53 | 
54 | 		           .pipe( plugins.svgmin() )
55 | 		           .pipe( plugins.rename( {prefix: 'icon-'} ) )
56 | 		           .pipe( plugins.svgstore( {inlineSvg: true} ) )
57 | 		           .pipe( plugins.cheerio( {
58 | 			           run: function ( $, file ) {
59 | 				           $( 'svg' ).attr( 'style', 'display:none' );
60 | 				           $( '[fill]' ).removeAttr( 'fill' );
61 | 			           },
62 | 			           parserOptions: {xmlMode: true}
63 | 		           } ) )
64 | 
65 | 		           .pipe( gulp.dest( settings.dest ) ).on( 'end', function () {
66 | 						plugins.util.log( plugins.util.colors.bgGreen( 'Icons are now optimized....[icons:svg()]' ) );
67 | 					} )
68 | 		           .pipe( browserSync.stream() )
69 | 		           .pipe( plugins.notify( {message: 'Icons are optimized.'} ) );
70 | 	};
71 | };


--------------------------------------------------------------------------------
/assets/gulp/tasks/imagemin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * imagemin.js - Optimize images.
 3 |  *
 4 |  * @package     UpGulp
 5 |  * @since       1.0.0
 6 |  * @author      hellofromTonya
 7 |  * @link        https://KnowTheCode.io
 8 |  * @license     GNU-2.0+
 9 |  */
10 | 
11 | 'use strict';
12 | 
13 | module.exports = function ( gulp, plugins, config ) {
14 | 
15 | 	var handleErrors = require( config.gulpDir + 'utils/handleErrors.js' ),
16 | 		settings = config.images;
17 | 
18 | 	/**
19 | 	 * The tasks are synchronous to ensure the order is maintained and
20 | 	 * avoid any potential conflicts with the promises.
21 | 	 *
22 | 	 * @since 1.0.0
23 | 	 */
24 | 	return function () {
25 | 
26 | 		gulp.src( settings.src )
27 | 
28 | 		    // Deal with errors.
29 | 		    .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
30 | 
31 | 		    .pipe( plugins.imagemin( {
32 | 			    optimizationLevel: 5,
33 | 			    progressive: true,
34 | 			    interlaced: true
35 | 		    } ) )
36 | 		    .pipe( gulp.dest( settings.dest ) ).on( 'end', function () {
37 | 				plugins.util.log( plugins.util.colors.bgGreen( 'Images are optimized....[imagemin()]' ) );
38 | 			} );
39 | 	}
40 | };


--------------------------------------------------------------------------------
/assets/gulp/tasks/scripts.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * scripts.js - Builds the distribution JavaScript and jQuery files
  3 |  *
  4 |  * @package     UpGulp
  5 |  * @since       1.0.0
  6 |  * @author      hellofromTonya
  7 |  * @link        https://KnowTheCode.io
  8 |  * @license     GNU-2.0+
  9 |  */
 10 | 
 11 | 'use strict';
 12 | 
 13 | module.exports = function ( gulp, plugins, config ) {
 14 | 
 15 | 	var handleErrors = require( config.gulpDir + 'utils/handleErrors.js' ),
 16 | 		runSequence = require('run-sequence').use(gulp);
 17 | 
 18 | 	/**
 19 | 	 * scripts task which is callable
 20 | 	 *
 21 | 	 * Tasks are run synchronously to ensure each step is completed
 22 | 	 * BEFORE moving on to the next one.  We don't want any race situations.
 23 | 	 *
 24 | 	 * @since 1.0.0
 25 | 	 */
 26 | 	gulp.task( 'scripts', function ( callback ) {
 27 | 		runSequence(
 28 | 			'scripts-clean',
 29 | 			'scripts-build-concat',
 30 | 			'scripts-minify',
 31 | 			callback );
 32 | 	} );
 33 | 
 34 | 
 35 | 	gulp.task( 'scripts-clean', function () {
 36 | 		var settings = config.scripts.clean;
 37 | 
 38 | 		return cleanScripts( settings );
 39 | 	} );
 40 | 
 41 | 	gulp.task( 'scripts-build-concat', function () {
 42 | 		return concatScripts();
 43 | 	} );
 44 | 
 45 | 	gulp.task( 'scripts-minify', function () {
 46 | 		return minifyScripts();
 47 | 	} );
 48 | 
 49 | 	/*******************
 50 | 	 * Task functions
 51 | 	 ******************/
 52 | 
 53 | 	/**
 54 | 	 * Delete the .js before we minify and optimize
 55 | 	 *
 56 | 	 * @since 1.0.0
 57 | 	 *
 58 | 	 * @param settings
 59 | 	 * @returns {*}
 60 | 	 */
 61 | 	function cleanScripts( settings ) {
 62 | 		plugins.del( settings.src );
 63 | 	};
 64 | 
 65 | 	/**
 66 | 	 * Concatentate the scripts into one big butt file
 67 | 	 *
 68 | 	 * @since 1.0.0
 69 | 	 *
 70 | 	 * @returns {*}
 71 | 	 */
 72 | 	function concatScripts() {
 73 | 		var settings = config.scripts.concat;
 74 | 
 75 | 		return gulp.src( settings.src )
 76 | 
 77 |            .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
 78 |            .pipe( plugins.concat( settings.concatSrc ) )
 79 |            .pipe( gulp.dest( settings.dest ) );
 80 | 	}
 81 | 	/**
 82 | 	 * Minify scripts
 83 | 	 *
 84 | 	 * @since 1.0.0
 85 | 	 */
 86 | 	function minifyScripts() {
 87 | 		var settings = config.scripts.uglify;
 88 | 
 89 | 		return gulp.src( settings.src )
 90 | 	           .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
 91 | 
 92 | 	           .pipe( plugins.rename( {suffix: '.min'} ) )
 93 | 	           .pipe( plugins.uglify( {
 94 | 		           mangle: false
 95 | 	           } ) )
 96 |                .pipe( gulp.dest( settings.dest ) )
 97 | 	           .pipe( plugins.notify( {message: 'Scripts are built.'} ) );
 98 | 	};
 99 | };
100 | 


--------------------------------------------------------------------------------
/assets/gulp/tasks/sprites.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * scripts.js - Builds the distribution JavaScript and jQuery files
 3 |  *
 4 |  * @package     UpGulp
 5 |  * @since       1.0.0
 6 |  * @author      hellofromTonya
 7 |  * @link        https://KnowTheCode.io
 8 |  * @license     GNU-2.0+
 9 |  */
10 | 
11 | 'use strict';
12 | 
13 | module.exports = function ( gulp, plugins, config ) {
14 | 
15 | 	var handleErrors = require( config.gulpDir + 'utils/handleErrors.js' );
16 | 
17 | 	/**
18 | 	 * The tasks are synchronous to ensure the order is maintained and
19 | 	 * avoid any potential conflicts with the promises.
20 | 	 *
21 | 	 * @since 1.0.0
22 | 	 */
23 | 	return function () {
24 | 		clean();
25 | 	};
26 | 	
27 | 	/**
28 | 	 * Delete first.
29 | 	 *
30 | 	 * @since 1.0.0
31 | 	 *
32 | 	 * @returns {*}
33 | 	 */
34 | 	function clean() {
35 | 		var settings = config.sprites.clean;
36 | 
37 | 		plugins.del( settings.src ).then( function () {
38 | 			plugins.util.log( plugins.util.colors.bgGreen( 'Sprites are now clean....[clean()]' ) );
39 | 			spritesmith();
40 | 		} );
41 | 	};
42 | 
43 | 	/**
44 | 	 * Concatenate images into a single PNG sprite.
45 | 	 * 
46 | 	 * @since 1.0.0
47 | 	 * 
48 | 	 * @returns {*}
49 | 	 */
50 | 	function spritesmith() {
51 | 
52 | 		var settings = config.sprites.spritesmith;
53 | 
54 | 		return gulp.src( settings.src )
55 | 
56 | 		           // Deal with errors.
57 | 		           .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
58 | 		           .pipe( plugins.spritesmith( {
59 | 			           imgName: 'sprites.png',
60 | 			           cssName: '../../assets/sass/base/_sprites.scss',
61 | 			           imgPath: 'assets/images/sprites.png',
62 | 			           algorithm: 'binary-tree'
63 | 		           } ) )
64 | 		           .pipe( gulp.dest( settings.dest ) ).on( 'end', function () {
65 | 				plugins.util.log( plugins.util.colors.bgGreen( 'Sprites are now optimized....[spritesmith()]' ) );
66 | 			} )
67 | 		           .pipe( plugins.notify( {message: 'Stripes are optimized.'} ) )
68 | 		           .pipe( plugins.browserSync.stream() );
69 | 	};
70 | };


--------------------------------------------------------------------------------
/assets/gulp/tasks/styles.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * style.js - Builds the distribution stylesheets
  3 |  *
  4 |  * Tasks include:
  5 |  *      1. Linting
  6 |  *      2. Compiles the Sass files into CSS and stores them into the Distribution location
  7 |  *      3. Minifies the CSS in the Distribution location
  8 |  *      4. Moves the style.css file from the Distribution location to the root of your theme
  9 |  *
 10 |  * @package     UpGulp
 11 |  * @since       1.0.3
 12 |  * @author      hellofromTonya
 13 |  * @link        https://KnowTheCode.io
 14 |  * @license     GNU-2.0+
 15 |  */
 16 | 
 17 | 'use strict';
 18 | 
 19 | module.exports = function ( gulp, plugins, config ) {
 20 | 
 21 | 	var handleErrors = require( config.gulpDir + 'utils/handleErrors.js' ),
 22 | 		bourbon = require( 'bourbon' ).includePaths,
 23 | 		neat = require( 'bourbon-neat' ).includePaths,
 24 | 		mqpacker = require( 'css-mqpacker' ),
 25 | 		runSequence = require('run-sequence').use(gulp);
 26 | 
 27 | 	/**
 28 | 	 * styles task which is callable
 29 | 	 *
 30 | 	 * Tasks are run synchronously to ensure each step is completed
 31 | 	 * BEFORE moving on to the next one.  We don't want any race situations.
 32 | 	 *
 33 | 	 * @since 1.0.1
 34 | 	 */
 35 | 	gulp.task( 'styles', function ( callback ) {
 36 | 
 37 | 		runSequence( 'styles-clean',
 38 | 			'styles-build-sass',
 39 | 			'styles-minify',
 40 | 			'styles-finalize',
 41 | 			'styles-final-clean',
 42 | 			callback );
 43 | 	} );
 44 | 
 45 | 	gulp.task( 'styles-clean', function () {
 46 | 		return cleanStyles( config.styles.clean );
 47 | 	} );
 48 | 
 49 | 	gulp.task( 'styles-build-sass', function () {
 50 | 		return buildSass( config.styles.postcss );
 51 | 	} );
 52 | 
 53 | 	gulp.task( 'styles-minify', function () {
 54 | 		return minifyStyles( config.styles.cssnano );
 55 | 	} );
 56 | 
 57 | 	gulp.task( 'styles-finalize', function () {
 58 | 		return stylesFinalize( config.styles.cssfinalize );
 59 | 	} );
 60 | 
 61 | 	gulp.task( 'styles-final-clean', function () {
 62 | 		var settings = config.styles.cssfinalize;
 63 | 
 64 | 		// Fix for Issue #1 - v1.0.3 11.July.2017
 65 | 		if ( settings.run === true ) {
 66 | 			cleanStyles( settings );
 67 | 		}
 68 | 
 69 | 		plugins.notify( {
 70 | 			title: "Woot!, Task Done",
 71 | 			message: 'Heya, styles are gulified.'
 72 | 		} );
 73 | 	} )
 74 | 
 75 | 	/*******************
 76 | 	 * Task functions
 77 | 	 ******************/
 78 | 
 79 | 	/**
 80 | 	 * Delete the .css before we minify and optimize
 81 | 	 *
 82 | 	 * @since 1.0.0
 83 | 	 *
 84 | 	 * @param settings
 85 | 	 * @returns {*}
 86 | 	 */
 87 | 	function cleanStyles( settings ) {
 88 | 		return plugins.del( settings.src ).then(function(){
 89 | 			plugins.util.log( plugins.util.colors.bgGreen( 'Styles are now clean....[cleanStyles()]' ) );
 90 | 		});
 91 | 	}
 92 | 
 93 | 	/**
 94 | 	 * Compile Sass and run stylesheet through PostCSS.
 95 | 	 *
 96 | 	 * @since 1.0.3
 97 | 	 *
 98 | 	 * @param settings
 99 | 	 * @returns {*}
100 | 	 */
101 | 	function buildSass( settings ) {
102 | 		return gulp.src( settings.src )
103 | 
104 | 	           .pipe( plugins.plumber( {
105 | 		           errorHandler: handleErrors
106 | 	           } ) )
107 | 
108 | 	           .pipe( plugins.sourcemaps.init() )
109 | 
110 | 	           .pipe( plugins.sass( {
111 | 		           includePaths: [].concat( bourbon, neat ),
112 | 		           errLogToConsole: true,
113 | 		           outputStyle: 'expanded' // Options: nested, expanded, compact, compressed
114 | 	           } ) )
115 | 
116 | 	           .pipe( plugins.postcss( [
117 | 		           plugins.autoprefixer( settings.autoprefixer ),
118 | 		           mqpacker(),
119 | 	           ] ) )
120 | 
121 | 	           .pipe( plugins.sourcemaps.write() )
122 | 
123 | 	           // Create *.css.
124 | 	           .pipe( gulp.dest( settings.dest ) ).on( 'end', function () {
125 | 					plugins.util.log( plugins.util.colors.bgGreen( 'Sass has been compiled into native CSS....[buildSass()]' ) );
126 | 				} )
127 | 	           .pipe( plugins.browserSync.stream() );
128 | 	}
129 | 
130 | 	/**
131 | 	 * Minify and optimize style.css.
132 | 	 *
133 | 	 * @since 1.0.3
134 | 	 *
135 | 	 * @param settings {}
136 | 	 * @returns {*}
137 | 	 */
138 | 	function minifyStyles( settings ) {
139 | 
140 | 		return gulp.src( settings.src, function( cb ){
141 | 				plugins.util.log( plugins.util.colors.bgGreen( 'styles are now minified and optimized....[minifyStyles()]' ) );
142 | 			})
143 | 
144 |            .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
145 | 
146 |            .pipe( plugins.cssnano( {
147 | 	           safe: true
148 |            }))
149 | 
150 |            .pipe( plugins.rename( function ( path ) {
151 | 	           path.basename += ".min";
152 |            } ) )
153 |            .pipe( gulp.dest( settings.dest ) )
154 |            .pipe( plugins.browserSync.stream() );
155 | 	};
156 | 
157 | 	/**
158 | 	 * Move the style.css file to the theme's root
159 | 	 *
160 | 	 * @since 1.0.0
161 | 	 *
162 | 	 * @param settings {}
163 | 	 *
164 | 	 * @returns {*}
165 | 	 */
166 | 	function stylesFinalize( settings ) {
167 | 		return gulp.src( settings.src, function(){
168 | 			    plugins.util.log( plugins.util.colors.bgGreen( 'Styles are all done....[cssfinalize()]' ) );
169 | 		} )
170 | 
171 | 		    .pipe( plugins.plumber( {errorHandler: handleErrors} ) )
172 | 		    .pipe( gulp.dest( settings.dest ) )
173 | 			.pipe( plugins.notify( {title: "Woot!, Task Done", message: 'Hello, styles are gulified.'} ) );
174 | 	}
175 | 
176 | 	/**
177 | 	 * Sass linting.
178 | 	 *
179 | 	 * @since 1.0.0
180 | 	 *
181 | 	 * @returns {*}
182 | 	 */
183 | 	function sassLint() {
184 | 		gulp.src( [
185 | 			    'assets/sass/**/*.scss',
186 | 			    '!assets/sass/base/_normalize.scss',
187 | 			    '!assets/sass/utilities/animate/**/*.*',
188 | 			    '!assets/sass/base/_sprites.scss'
189 | 		    ] )
190 | 		    .pipe( plugins.sassLint() )
191 | 		    .pipe( plugins.sassLint.format() )
192 | 		    .pipe( plugins.sassLint.failOnError() );
193 | 	};
194 | };


--------------------------------------------------------------------------------
/assets/gulp/tasks/watch.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * watch.js - Builds the distribution JavaScript files
 3 |  *
 4 |  * @package     UpGulp
 5 |  * @since       1.0.0
 6 |  * @author      hellofromTonya
 7 |  * @link        https://KnowTheCode.io
 8 |  * @license     GNU-2.0+
 9 |  */
10 | 
11 | 'use strict';
12 | 
13 | module.exports = function ( gulp, plugins, config ) {
14 | 
15 | 	/**
16 | 	 * Handles the browserSync and watch tasks.
17 | 	 *
18 | 	 * @since 1.0.1
19 | 	 */
20 | 	gulp.task( 'watch', function ( callback ) {
21 | 
22 | 		// Kick off BrowserSync.
23 | 		plugins.browserSync( config.watch.browserSync );
24 | 
25 | 		// Run tasks when files change.
26 | 		gulp.watch( config.paths.icons, ['icons'] );
27 | 		gulp.watch( config.paths.sass, ['styles'] );
28 | 		gulp.watch( config.paths.scripts, ['scripts'] );
29 | 		gulp.watch( config.paths.concatScripts, ['scripts'] );
30 | 		gulp.watch( config.paths.sprites, ['sprites'] );
31 | 	});
32 | };


--------------------------------------------------------------------------------
/assets/gulp/utils/handleErrors.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * handleErrors.js - Error handler that sends notification and keeps gulp
 3 |  * running.
 4 |  *
 5 |  * Depending on the OS that gulp is run on, the `notify` command might have
 6 |  * different run-time dependencies to actually show a real notification.
 7 |  * @see https://www.npmjs.com/package/gulp-notify#requirements
 8 |  *
 9 |  * @package     UpGulp
10 |  * @since       1.0.0
11 |  * @author      hellofromTonya
12 |  * @link        https://KnowTheCode.io
13 |  * @license     GNU-2.0+
14 |  */
15 | 
16 | var notify = require( 'gulp-notify' ),
17 | 	gutil = require( 'gulp-util' );
18 | 
19 | module.exports = function (error) {
20 | 	var args = Array.prototype.slice.call( arguments );
21 | 
22 | 	notify.onError( {
23 | 		title: 'Task Failed [<%= error.message %>',
24 | 		message: 'See console.',
25 | 		sound: 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
26 | 	} ).apply( this, args );
27 | 
28 | 	gutil.beep(); // Beep 'sosumi' again
29 | 
30 | 	// Prevent the 'watch' task from stopping
31 | 	this.emit( 'end' );
32 | };


--------------------------------------------------------------------------------
/assets/images/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/assets/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/assets/js/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/assets/sass/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/config/gulp/config.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * UpGulp - Gulp tasks runtime configuration script
  3 |  *
  4 |  * @package     UpGulp
  5 |  * @since       1.0.2
  6 |  * @author      hellofromTonya
  7 |  * @link        https://KnowTheCode.io
  8 |  * @license     GNU-2.0+
  9 |  */
 10 | 
 11 | module.exports = function ( moduleRoot ) {
 12 | 
 13 | 	/************************************
 14 | 	 * Module Settings
 15 | 	 *
 16 | 	 * ACTION:
 17 | 	 * You need to change these settings
 18 | 	 * to fit your project.
 19 | 	 ***********************************/
 20 | 
 21 | 	var moduleSettings = {
 22 | 		package: 'knowthecode',
 23 | 		domain: 'knowthecode.dev',
 24 | 		// If this is for a theme, set to `true`; else, set to `false`.
 25 | 		isTheme: false,
 26 | 		i18n: {
 27 | 			textdomain: 'knowthecode',
 28 | 			languageFilename: 'knowthecode.pot',
 29 | 			bugReport: 'https://knowthecode.io',
 30 | 			lastTranslator: 'Know the Code <hello@knowthecode.io>',
 31 | 			team: 'Team <hello@knowthecode.io>'
 32 | 		}
 33 | 	};
 34 | 
 35 | 
 36 | 	/************************************
 37 | 	 * Folder Structure
 38 | 	 ***********************************/
 39 | 
 40 | 	/**
 41 | 	 * Assets folder - path to the location of all the assets,
 42 | 	 * i.e. images, Sass, scripts, styles, etc.
 43 | 	 *
 44 | 	 * @type {String}
 45 | 	 */
 46 | 	var assetsDir = moduleRoot + 'assets/';
 47 | 
 48 | 	/**
 49 | 	 * gulp folder - path to where the gulp utils and
 50 | 	 * tasks are located.
 51 | 	 *
 52 | 	 * @type {String}
 53 | 	 */
 54 | 	var gulpDir = assetsDir + 'gulp/';
 55 | 
 56 | 	/**
 57 | 	 * Distribution folder - path to where the final build, distribution
 58 | 	 * files will be located.
 59 | 	 *
 60 | 	 * @type {String}
 61 | 	 */
 62 | 	var distDir = assetsDir + 'dist/';
 63 | 
 64 | 	/**
 65 | 	 * Assets folder - path to where the raw files are located.
 66 | 	 *
 67 | 	 * @type {Object}
 68 | 	 */
 69 | 	var assetDirs = {
 70 | 		css: assetsDir + 'css/',
 71 | 		fonts: assetsDir + 'fonts/',
 72 | 		icons: assetsDir + 'icons/',
 73 | 		images: assetsDir + 'images/',
 74 | 		sass: assetsDir + 'sass/',
 75 | 		scripts: assetsDir + 'js/'
 76 | 	}
 77 | 
 78 | 	/**
 79 | 	 * Paths
 80 | 	 *
 81 | 	 * @type {Object}
 82 | 	 */
 83 | 	var paths = {
 84 | 		css: ['./*.css', '!*.min.css'],
 85 | 		icons: assetDirs.images + 'svg-icons/*.svg',
 86 | 		images: [ assetDirs.images + '*', '!' + assetDirs.images + '*.svg' ],
 87 | 		php: [ moduleRoot + '*.php', moduleRoot + '**/*.php'],
 88 | 		sass: assetDirs.sass + '**/*.scss',
 89 | 		concatScripts: assetDirs.scripts + '*.js',
 90 | 		scripts: [ assetDirs.scripts + '*.js', '!' + assetDirs.scripts + '*.min.js' ],
 91 | 		sprites: assetDirs.images + 'sprites/*.png'
 92 | 	};
 93 | 
 94 | 	/**
 95 | 	 * Distribution folder - path to where the final build, distribution
 96 | 	 * files will be located.
 97 | 	 *
 98 | 	 * @type {Object}
 99 | 	 */
100 | 	var distDirs = {
101 | 		root: moduleRoot,
102 | 		css: distDir + 'css/',
103 | 		finalCSS: moduleSettings.isTheme ? moduleRoot : distDir + 'css/',
104 | 		scripts: distDir + 'js/'
105 | 	};
106 | 
107 | 	var distFilenames = {
108 | 		concatScripts: 'jquery.project.js'
109 | 	};
110 | 
111 | 	/************************************
112 | 	 * Theme Settings
113 | 	 ***********************************/
114 | 
115 | 	var stylesSettings = {
116 | 		clean: {
117 | 			src : [ distDirs.css + "*.*", moduleRoot + "style.css", moduleRoot + "style.min.css" ]
118 | 		},
119 | 		postcss: {
120 | 			src: [ assetDirs.sass + '*.scss' ],
121 | 			dest: distDirs.css,
122 | 			autoprefixer: {
123 | 				browsers: [
124 | 					'last 2 versions',
125 | 					'ie 9',
126 | 					'ios 6',
127 | 					'android 4'
128 | 				]
129 | 			}
130 | 		},
131 | 		cssnano: {
132 | 			src: distDirs.css + "*.css",
133 | 			dest: distDirs.css,
134 | 		},
135 | 		cssfinalize: {
136 | 			// Fix for Issue #1 - v1.0.3 11.July.2017
137 | 			run: moduleSettings.isTheme ? true : false,
138 | 			src: [ distDirs.css + "style.css", distDirs.css + "style.min.css" ],
139 | 			dest: distDirs.finalCSS,
140 | 		}
141 | 	};
142 | 
143 | 	var scriptsSettings = {
144 | 		clean: {
145 | 			src : [ distDirs.scripts + "*.*" ]
146 | 		},
147 | 		concat: {
148 | 			src: paths.concatScripts,
149 | 			dest: distDirs.scripts,
150 | 			concatSrc: distFilenames.concatScripts,
151 | 		},
152 | 		uglify: {
153 | 			src: distDirs.scripts + '*.js',
154 | 			dest: distDirs.scripts,
155 | 		}
156 | 	};
157 | 	
158 | 	var i18nSettings = {
159 | 		clean: {
160 | 			src : [ moduleRoot + "languages/" + moduleSettings.i18n.languageFilename ]
161 | 		},
162 | 		pot: {
163 | 			src: paths.php,
164 | 			wppot: {
165 | 				domain: moduleSettings.i18n.textdomain,
166 | 				destFile: moduleSettings.i18n.languageFilename,
167 | 				package: moduleSettings.package,
168 | 				bugReport: moduleSettings.i18n.bugReport,
169 | 				lastTranslator: moduleSettings.i18n.lastTranslator,
170 | 				team: moduleSettings.i18n.team
171 | 			},
172 | 			dest: moduleRoot + "languages/"
173 | 		}
174 | 	}
175 | 	
176 | 	var iconsSettings = {
177 | 		clean: {
178 | 			src : [ assetDirs.images + "svg-icons.svg" ]
179 | 		},
180 | 		svg: {
181 | 			src: paths.icons,
182 | 			desc: assetDirs.images
183 | 		}
184 | 	}
185 | 
186 | 	var spriteSettings = {
187 | 		clean: {
188 | 			src : [ assetDirs.images + "sprites.png" ]
189 | 		},
190 | 		spritesmith: {
191 | 			src: paths.sprites,
192 | 			dest: assetDirs.images
193 | 		}
194 | 	}
195 | 
196 | 	var imageminSettings = {
197 | 		src: paths.images,
198 | 		dest: assetDirs.images
199 | 	}
200 | 
201 | 	var watchSettings = {
202 | 		browserSync:	{
203 | 			open: false,             // Open project in a new tab?
204 | 			injectChanges: true,     // Auto inject changes instead of full reload
205 | 			proxy: moduleSettings.domain,  // Use http://domainname.tld:3000 to use BrowserSync
206 | 			watchOptions: {
207 | 				debounceDelay: 1000  // Wait 1 second before injecting
208 | 			}
209 | 		}
210 | 	}
211 | 
212 | 
213 | 	/************************************
214 | 	 * Do not touch below this line.
215 | 	 *
216 | 	 * The following code assembles up the
217 | 	 * configuration object that is returned
218 | 	 * to gulpfile.js.
219 | 	 ***********************************/
220 | 
221 | 	return {
222 | 		moduleRoot: moduleRoot,
223 | 		assetsDir: assetsDir,
224 | 		assetDirs: assetDirs,
225 | 		dist: distDirs,
226 | 		distDir: distDir,
227 | 		gulpDir: gulpDir,
228 | 		paths: paths,
229 | 
230 | 		i18n: i18nSettings,
231 | 		icons: iconsSettings,
232 | 		images: imageminSettings,
233 | 		scripts: scriptsSettings,
234 | 		sprites: spriteSettings,
235 | 		styles: stylesSettings,
236 | 		watch: watchSettings
237 | 	};
238 | };


--------------------------------------------------------------------------------
/config/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * gulfile.js - Entry point for launching KnowTheCodeGulp
 3 |  *
 4 |  * @package     UpGulp
 5 |  * @since       1.0.2
 6 |  * @author      hellofromTonya
 7 |  * @link        https://KnowTheCode.io
 8 |  * @license     GPL-2.0+
 9 |  *
10 |  * This gulpfile.js is a customized version of the wd_s from WebDevStudios
11 |  * @link https://github.com/WebDevStudios/wd_s/blob/master/Gulpfile.js
12 |  */
13 | 
14 | /**********************************************
15 |  * Declarations
16 |  *********************************************/
17 | var gulp = require( 'gulp' ),
18 | 	/**
19 | 	 * Fetch all of the plugins out of the package.json file.
20 | 	 * This reduces redundancy and keeps us DRY.
21 | 	 */
22 | 	plugins = require( 'gulp-load-plugins' )( {
23 | 		pattern: '*'
24 | 	} ),
25 | 	/**
26 | 	 * Fetch where the `config.js` is located within the theme.  This value
27 | 	 * is stored in the `package.json` file and keyed by `gulpConfig`.
28 | 	 */
29 | 	gulpConfig = require( './package' ).gulpConfig,
30 | 	/**
31 | 	 * We want to make sure we have the module's root, as files are being
32 | 	 * loaded and processed from subfolders.
33 | 	 */
34 | 	moduleRoot = require( 'app-root-path' ).resolve( './' ),
35 | 	/**
36 | 	 * Now load the `config.js` file, which has all of the
37 | 	 * settings and parameters for the tasks.
38 | 	 */
39 | 	config = require( "./" + gulpConfig )( moduleRoot );
40 | 
41 | /**
42 |  * Load up the reload into plugins.
43 |  */
44 | plugins.reload = plugins.browserSync.reload;
45 | 
46 | /**********************************************
47 |  * Task Module Loader
48 |  * ********************************************
49 |  *
50 |  * Get the Task from the tasks folder.  Using this architecture,
51 |  * we are able to parse out the tasks into separate files, which are
52 |  * located in the `gulp/tasks/` folder.  This promotes a more
53 |  * modular gulp structure verses having everything loaded here
54 |  * in this one file.
55 |  *
56 |  * @since 1.0.0
57 |  *
58 |  * @param {string} task Name of the task to be loaded.
59 |  *
60 |  * @returns {*}
61 |  */
62 | function getTask( task ) {
63 | 	var taskDir = config.gulpDir + 'tasks/' + task;
64 | 
65 | 	return require( taskDir )( gulp, plugins, config );
66 | }
67 | 
68 | var tasks = ['i18n', 'icons', 'imagemin', 'styles', 'scripts', 'sprites', 'watch'];
69 | for ( var index in tasks ) {
70 | 	getTask( tasks[ index ] );
71 | }
72 | 
73 | /**********************************************
74 |  * Callable Tasks
75 |  * ********************************************
76 |  *
77 |  * Here are the individual tasks which can be run.  Notice that
78 |  * they load up the task file when called.
79 |  */
80 | 
81 | gulp.task( 'default', ['sprites', 'i18n', 'icons', 'styles', 'scripts', 'imagemin' ] );
82 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // silence is golden


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "UpGulp",
 3 |   "version": "1.0.2",
 4 |   "description": "A Gulp Starter for WordPress Project",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/KnowTheCode/UpGulp"
 8 |   },
 9 |   "author": "hellofromTonya",
10 |   "license": "GPL-2.0",
11 |   "bugs": {
12 |     "url": "https://github.com/KnowTheCode/UpGulp/issues"
13 |   },
14 |   "homepage": "hhttps://github.com/KnowTheCode/UpGulp",
15 |   "devDependencies": {
16 |     "autoprefixer": "^6.3.1",
17 |     "bourbon": "^4.2.6",
18 |     "bourbon-neat": "^1.7.2",
19 |     "browser-sync": "^2.11.1",
20 |     "css-mqpacker": "^5.0.1",
21 |     "del": "^2.2.0",
22 |     "glob": "^6.0.4",
23 |     "gulp": "^3.9.1",
24 |     "gulp-cheerio": "^0.6.2",
25 |     "gulp-concat": "^2.6.0",
26 |     "gulp-cssnano": "^2.1.2",
27 |     "gulp-imagemin": "^2.4.0",
28 |     "gulp-load-plugins": "^1.2.2",
29 |     "gulp-notify": "^2.2.0",
30 |     "gulp-plumber": "^1.1.0",
31 |     "gulp-postcss": "^6.1.1",
32 |     "sass-rem": "^1.2.2",
33 |     "gulp-rename": "^1.2.2",
34 |     "gulp-sass": "^2.3.2",
35 |     "gulp-sass-lint": "^1.2.0",
36 |     "gulp-sort": "^1.1.1",
37 |     "gulp-sourcemaps": "^1.6.0",
38 |     "gulp-svgmin": "^1.2.1",
39 |     "gulp-svgstore": "^5.0.5",
40 |     "gulp-uglify": "^1.5.2",
41 |     "gulp-util": "^3.0.7",
42 |     "gulp-wp-pot": "^1.1.1",
43 |     "gulp.spritesmith": "^6.2.0",
44 |     "require-dir": "^0.3.0",
45 |     "run-sequence": "^1.2.0"
46 |   },
47 |   "dependencies": {
48 |     "app-root-path": "^1.0.0"
49 |   },
50 |   "gulpConfig": "./config/gulp/config.js"
51 | }
52 | 


--------------------------------------------------------------------------------