├── index.php ├── assets ├── index.php ├── dist │ └── index.php ├── gulp │ ├── index.php │ ├── tasks │ │ ├── watch.js │ │ ├── imagemin.js │ │ ├── i18n.js │ │ ├── sprites.js │ │ ├── icons.js │ │ ├── scripts.js │ │ └── styles.js │ └── utils │ │ └── handleErrors.js ├── images │ └── index.php ├── js │ └── index.php └── sass │ └── index.php ├── config ├── index.php └── gulp │ └── config.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── package.json ├── gulpfile.js └── README.md /index.php: -------------------------------------------------------------------------------- 1 | ', 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/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/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 | }; -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | }; -------------------------------------------------------------------------------- /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 ', 31 | team: 'Team ' 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 | }; --------------------------------------------------------------------------------