Skip to content

Commit

Permalink
Hotfix/sprites. Fixes #308 (#310)
Browse files Browse the repository at this point in the history 
* bump lockfile

* include node’s file system functions

* bump

* remove uneeded config param

* run Gulpfile through eslint —fix

* eslint and eslint-config-wordpress bump 🚀

* fix local proxy url 👮🏻‍♂️

* bump to latest version of gulp dependencies 🚀

* remove clean sprites, use babel “latest” 💁🏻‍♂️

* run gulp 🏃🏻‍♂️
  • Loading branch information
@gregrickaby
gregrickaby authored Jul 12, 2017
1 parent 4292eda commit 69d166b
Show file tree
Hide file tree
Showing 9 changed files with 12,233 additions and 1,304 deletions.
1 change: 0 additions & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ module.exports = {
"es6": true,
},
"extends": "wordpress",
"installedESLint": true,
"plugins": [],
"rules": {
// Enforce spacing inside array brackets
Expand Down
131 changes: 66 additions & 65 deletions Gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const concat = require( 'gulp-concat' );
const cssnano = require( 'gulp-cssnano' );
const del = require( 'del' );
const eslint = require( 'gulp-eslint' );
const fs = require( 'fs' );
const gulp = require( 'gulp' );
const gutil = require( 'gulp-util' );
const imagemin = require( 'gulp-imagemin' );
Expand Down Expand Up @@ -43,14 +44,14 @@ const paths = {
/**
* Handle errors and alert the user.
*/
function handleErrors () {
function handleErrors() {
const args = Array.prototype.slice.call( arguments );

notify.onError( {
notify.onError({
'title': 'Task Failed [<%= error.message %>',
'message': 'See console.',
'sound': 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
} ).apply( this, args );
}).apply( this, args );

gutil.beep(); // Beep 'sosumi' again.

Expand All @@ -62,7 +63,7 @@ function handleErrors () {
* Delete style.css and style.min.css before we minify and optimize
*/
gulp.task( 'clean:styles', () =>
del( [ 'style.css', 'style.min.css' ] )
del([ 'style.css', 'style.min.css' ])
);

/**
Expand All @@ -77,27 +78,27 @@ gulp.task( 'postcss', [ 'clean:styles' ], () =>
gulp.src( 'assets/sass/*.scss', paths.css )

// Deal with errors.
.pipe( plumber( {'errorHandler': handleErrors} ) )
.pipe( plumber({'errorHandler': handleErrors}) )

// Wrap tasks in a sourcemap.
.pipe( sourcemaps.init() )

// Compile Sass using LibSass.
.pipe( sass( {
.pipe( sass({
'includePaths': [].concat( bourbon, neat ),
'errLogToConsole': true,
'outputStyle': 'expanded' // Options: nested, expanded, compact, compressed
} ) )
}) )

// Parse with PostCSS plugins.
.pipe( postcss( [
autoprefixer( {
.pipe( postcss([
autoprefixer({
'browsers': [ 'last 2 version' ]
} ),
mqpacker( {
}),
mqpacker({
'sort': true
} )
] ) )
})
]) )

// Create sourcemap.
.pipe( sourcemaps.write() )
Expand All @@ -114,10 +115,10 @@ gulp.task( 'postcss', [ 'clean:styles' ], () =>
*/
gulp.task( 'cssnano', [ 'postcss' ], () =>
gulp.src( 'style.css' )
.pipe( plumber( {'errorHandler': handleErrors} ) )
.pipe( cssnano( {
.pipe( plumber({'errorHandler': handleErrors}) )
.pipe( cssnano({
'safe': true // Use safe optimizations.
} ) )
}) )
.pipe( rename( 'style.min.css' ) )
.pipe( gulp.dest( './' ) )
.pipe( browserSync.stream() )
Expand All @@ -127,7 +128,7 @@ gulp.task( 'cssnano', [ 'postcss' ], () =>
* Delete the svg-icons.svg before we minify, concat.
*/
gulp.task( 'clean:icons', () =>
del( [ 'assets/images/svg-icons.svg' ] )
del([ 'assets/images/svg-icons.svg' ])
);

/**
Expand All @@ -141,26 +142,26 @@ gulp.task( 'svg', [ 'clean:icons' ], () =>
gulp.src( paths.icons )

// Deal with errors.
.pipe( plumber( {'errorHandler': handleErrors} ) )
.pipe( plumber({'errorHandler': handleErrors}) )

// Minify SVGs.
.pipe( svgmin() )

// Add a prefix to SVG IDs.
.pipe( rename( {'prefix': 'icon-'} ) )
.pipe( rename({'prefix': 'icon-'}) )

// Combine all SVGs into a single <symbol>
.pipe( svgstore( {'inlineSvg': true} ) )
.pipe( svgstore({'inlineSvg': true}) )

// Clean up the <symbol> by removing the following cruft...
.pipe( cheerio( {
'run': function ( $, file ) {
.pipe( cheerio({
'run': function( $, file ) {
$( 'svg' ).attr( 'style', 'display:none' );
$( '[fill]' ).removeAttr( 'fill' );
$( 'path' ).removeAttr( 'class' );
},
'parserOptions': {'xmlMode': true}
} ) )
}) )

// Save svg-icons.svg.
.pipe( gulp.dest( 'assets/images/' ) )
Expand All @@ -174,36 +175,36 @@ gulp.task( 'svg', [ 'clean:icons' ], () =>
*/
gulp.task( 'imagemin', () =>
gulp.src( paths.images )
.pipe( plumber( {'errorHandler': handleErrors} ) )
.pipe( imagemin( {
.pipe( plumber({'errorHandler': handleErrors}) )
.pipe( imagemin({
'optimizationLevel': 5,
'progressive': true,
'interlaced': true
} ) )
}) )
.pipe( gulp.dest( 'assets/images' ) )
);

/**
* Delete the sprites.png before rebuilding sprite.
*/
gulp.task( 'clean:sprites', () => {
del( [ 'assets/images/sprites.png' ] )
} );
del([ 'assets/images/sprites.png' ]);
});

/**
* Concatenate images into a single PNG sprite.
*
* https://www.npmjs.com/package/gulp.spritesmith
*/
gulp.task( 'spritesmith', [ 'clean:sprites' ], () =>
gulp.task( 'spritesmith', () =>
gulp.src( paths.sprites )
.pipe( plumber( {'errorHandler': handleErrors} ) )
.pipe( spritesmith( {
.pipe( plumber({'errorHandler': handleErrors}) )
.pipe( spritesmith({
'imgName': 'sprites.png',
'cssName': '../../assets/sass/base/_sprites.scss',
'imgPath': 'assets/images/sprites.png',
'algorithm': 'binary-tree'
} ) )
}) )
.pipe( gulp.dest( 'assets/images/' ) )
.pipe( browserSync.stream() )
);
Expand All @@ -227,9 +228,9 @@ gulp.task( 'concat', () =>
.pipe( sourcemaps.init() )

// Convert ES6+ to ES2015.
.pipe( babel( {
presets: [ 'es2015' ]
} ) )
.pipe( babel({
presets: [ 'latest' ]
}) )

// Concatenate partials into a single script.
.pipe( concat( 'project.js' ) )
Expand All @@ -249,18 +250,18 @@ gulp.task( 'concat', () =>
*/
gulp.task( 'uglify', [ 'concat' ], () =>
gulp.src( paths.scripts )
.pipe( rename( {'suffix': '.min'} ) )
.pipe( uglify( {
.pipe( rename({'suffix': '.min'}) )
.pipe( uglify({
'mangle': false
} ) )
}) )
.pipe( gulp.dest( 'assets/scripts' ) )
);

/**
* Delete the theme's .pot before we create a new one.
*/
gulp.task( 'clean:pot', () =>
del( [ 'languages/_s.pot' ] )
del([ 'languages/_s.pot' ])
);

/**
Expand All @@ -270,12 +271,12 @@ gulp.task( 'clean:pot', () =>
*/
gulp.task( 'wp-pot', [ 'clean:pot' ], () =>
gulp.src( paths.php )
.pipe( plumber( {'errorHandler': handleErrors} ) )
.pipe( plumber({'errorHandler': handleErrors}) )
.pipe( sort() )
.pipe( wpPot( {
.pipe( wpPot({
'domain': '_s',
'package': '_s',
} ) )
'package': '_s'
}) )
.pipe( gulp.dest( 'languages/_s.pot' ) )
);

Expand All @@ -285,12 +286,12 @@ gulp.task( 'wp-pot', [ 'clean:pot' ], () =>
* https://www.npmjs.com/package/sass-lint
*/
gulp.task( 'sass:lint', () =>
gulp.src( [
gulp.src([
'assets/sass/**/*.scss',
'!assets/sass/base/_normalize.scss',
'!assets/sass/base/_sprites.scss',
'!node_modules/**'
] )
])
.pipe( sassLint() )
.pipe( sassLint.format() )
.pipe( sassLint.failOnError() )
Expand All @@ -302,15 +303,15 @@ gulp.task( 'sass:lint', () =>
* https://www.npmjs.com/package/gulp-eslint
*/
gulp.task( 'js:lint', () =>
gulp.src( [
gulp.src([
'assets/scripts/concat/*.js',
'assets/scripts/*.js',
'!assets/scripts/project.js',
'!assets/scripts/*.min.js',
'!Gruntfile.js',
'!Gulpfile.js',
'!node_modules/**'
] )
])
.pipe( eslint() )
.pipe( eslint.format() )
.pipe( eslint.failAfterError() )
Expand All @@ -321,35 +322,35 @@ gulp.task( 'js:lint', () =>
*
* https://www.npmjs.com/package/browser-sync
*/
gulp.task( 'watch', function () {
gulp.task( 'watch', function() {

// Kick off BrowserSync.
browserSync( {
browserSync({
'open': false, // Open project in a new tab?
'injectChanges': true, // Auto inject changes instead of full reload.
'proxy': 'testing.dev', // Use http://_s.com:3000 to use BrowserSync.
'proxy': '_s.dev', // Use http://_s.dev:3000 to use BrowserSync.
'watchOptions': {
'debounceDelay': 1000 // Wait 1 second before injecting.
}
} );
});

// Run tasks when files change.
gulp.watch( paths.icons, [ 'icons' ] );
gulp.watch( paths.sass, [ 'styles' ] );
gulp.watch( paths.scripts, [ 'scripts' ] );
gulp.watch( paths.concat_scripts, [ 'scripts' ] );
gulp.watch( paths.sprites, [ 'sprites' ] );
gulp.watch( paths.php, [ 'markup' ] );
} );
gulp.watch( paths.icons, [ 'icons' ]);
gulp.watch( paths.sass, [ 'styles' ]);
gulp.watch( paths.scripts, [ 'scripts' ]);
gulp.watch( paths.concat_scripts, [ 'scripts' ]);
gulp.watch( paths.sprites, [ 'sprites' ]);
gulp.watch( paths.php, [ 'markup' ]);
});

/**
* Create individual tasks.
*/
gulp.task( 'markup', browserSync.reload );
gulp.task( 'i18n', [ 'wp-pot' ] );
gulp.task( 'icons', [ 'svg' ] );
gulp.task( 'scripts', [ 'uglify' ] );
gulp.task( 'styles', [ 'cssnano' ] );
gulp.task( 'sprites', [ 'spritesmith' ] );
gulp.task( 'lint', [ 'sass:lint', 'js:lint' ] );
gulp.task( 'default', [ 'sprites', 'i18n', 'icons', 'styles', 'scripts', 'imagemin'] );
gulp.task( 'i18n', [ 'wp-pot' ]);
gulp.task( 'icons', [ 'svg' ]);
gulp.task( 'scripts', [ 'uglify' ]);
gulp.task( 'styles', [ 'cssnano' ]);
gulp.task( 'sprites', [ 'spritesmith' ]);
gulp.task( 'lint', [ 'sass:lint', 'js:lint' ]);
gulp.task( 'default', [ 'sprites', 'i18n', 'icons', 'styles', 'scripts', 'imagemin' ]);
Loading

0 comments on commit 69d166b

Please sign in to comment.