Last active
April 6, 2017 14:10
-
-
Save pauloiankoski/cc226422c49301263841a64fa5eb0275 to your computer and use it in GitHub Desktop.
Single gulpfile.js to compile SASS and minify JS on multiples folders on a WordPress project.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp // Compile all files from all folders | |
gulp css // Compile all SASS files from all folders | |
gulp js // Minify all JS files from all folders | |
gulp --plugin1 // Compile all files from plugin1 folder | |
gulp css --plugin1 // Compile all SASS files from plugin1 folder | |
gulp js --plugin1 // Minify all JS files from plugin1 folder | |
gulp --plugin1 --theme1 // Compile all files from plugin1 and theme1 folders | |
gulp css --plugin1 --theme1 // Compile all SASS files from plugin1 and theme1 folders | |
gulp js --plugin1 --theme1 // Minify all JS files from plugin1 and theme1 folders | |
gulp watch // Run default function and start to watch for file changes | |
gulp gulpfolders // Look into all folders for a gulp.me file and add its parent to gulpfolders.json | |
// Where "plugin1" and "theme1" are names defined on gulpfolders.json to refer a path |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* REQUIRES | |
*/ | |
var args = require('yargs').argv | |
autoPrefixer = require('gulp-autoprefixer'), | |
cleanCSS = require('gulp-clean-css'), | |
combiner = require('stream-combiner2'), | |
del = require('del'), | |
es = require('event-stream'), | |
fs = require('fs'), | |
glob = require('glob'), | |
gulp = require('gulp'), | |
print = require('gulp-print'), | |
rename = require('gulp-rename'), | |
sass = require('gulp-sass'), | |
sourceMaps = require('gulp-sourcemaps'), | |
uglify = require('gulp-uglify'), | |
folders = require('./gulpfolders.json') | |
/** | |
* VARIABLES | |
*/ | |
var base = 'wp-content/', | |
paths = { | |
sass: '/assets/sass/*.scss', | |
css: '/assets/css', | |
sourceJS: '/assets/js/source/*.js', | |
distJS: '/assets/js' | |
} | |
/** | |
* FUNCTIONS | |
*/ | |
function generateGulpFoldersJSON() { | |
var folders = {} | |
glob.sync( base + '**/gulp.me').map( folder => { | |
var folder = folder.replace( '/gulp.me', ''), | |
pathParts = folder.split('/') | |
folders[pathParts[pathParts.length - 1]] = folder | |
return true | |
}) | |
json = JSON.stringify( folders ) | |
fs.writeFileSync( 'gulpfolders.json', json, 'utf8' ) | |
} | |
function getFoldersToWorkOn() { | |
var foldersToWorkOn = Object.keys( folders ).filter( key => { | |
if ( args[key] ) { | |
return true | |
} | |
}) | |
if ( 0 === foldersToWorkOn.length ) { | |
foldersToWorkOn = Object.keys( folders ) | |
} | |
return foldersToWorkOn | |
} | |
function getFolderKeyFromPath( path ) { | |
var folderKey = null | |
Object.keys( folders ).forEach( key => { | |
if ( 0 < path.indexOf( folders[key] ) ) { | |
folderKey = key | |
} | |
}) | |
return folderKey | |
} | |
function compileCSS( folderKey ) { | |
del.sync( [folders[folderKey] + paths.css + '/*.css'] ) | |
var combined = combiner.obj([ | |
gulp.src( folders[folderKey] + paths.sass ), | |
print(), | |
sourceMaps.init(), | |
sass(), | |
autoPrefixer(), | |
gulp.dest( folders[folderKey] + paths.css ), | |
cleanCSS(), | |
rename({ suffix: '.min' }), | |
sourceMaps.write(), | |
gulp.dest( folders[folderKey] + paths.css ) | |
]) | |
combined.on('error', console.error.bind(console)) | |
return combined | |
} | |
function minifyJS( folderKey ) { | |
del.sync( [folders[folderKey] + paths.distJS + '/*.js'] ) | |
var combined = combiner.obj([ | |
gulp.src( folders[folderKey] + paths.sourceJS ), | |
print(), | |
sourceMaps.init(), | |
uglify(), | |
rename({ suffix: '.min' }), | |
sourceMaps.write(), | |
gulp.dest( folders[folderKey] + paths.distJS ) | |
]) | |
combined.on('error', console.error.bind(console)) | |
return combined | |
} | |
/** | |
* GULP TASKS | |
*/ | |
gulp.task( 'gulpfolders', function() { | |
return generateGulpFoldersJSON() | |
}) | |
gulp.task( 'css', function() { | |
var streams = getFoldersToWorkOn().map( compileCSS ) | |
return es.merge( streams ) | |
}) | |
gulp.task( 'js', function() { | |
var streams = getFoldersToWorkOn().map( minifyJS ) | |
return es.merge( streams ) | |
}) | |
gulp.task( 'default', [ 'css', 'js' ] ); | |
gulp.task('watch', ['default'], function() { | |
gulp.watch( | |
Object.keys( folders ).map( folderKey => { | |
return folders[folderKey] + paths.sass.replace( '*.scss', '**/*.scss' ) | |
}) | |
).on('change', function(event) { | |
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...') | |
args = [] | |
args[getFolderKeyFromPath( event.path )] = true | |
gulp.start( 'css' ) | |
}); | |
gulp.watch( | |
Object.keys( folders ).map( folderKey => { | |
return folders[folderKey] + paths.sourceJS | |
}) | |
).on('change', function(event) { | |
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...') | |
args = [] | |
args[getFolderKeyFromPath( event.path )] = true | |
gulp.start( 'js' ) | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "gulp-sass-js-multiples-folders", | |
"version": "1.0.0", | |
"description": "<!DOCTYPE html> <html> <head> \t<meta name=\"viewport\" content=\"width=device-width\" /> \t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> \t<title>WordPress › ReadMe</title> \t<link rel=\"stylesheet\" href=\"wp-admin/css/install.css?ver=20100228\" type=\"text/css\" /> </head> <body> <h1 id=\"logo\"> \t<a href=\"https://wordpress.org/\"><img alt=\"WordPress\" src=\"wp-admin/images/wordpress-logo.png\" /></a> \t<br /> Version 4.7 </h1> <p style=\"text-align: center\">Semantic Personal Publishing Platform</p>", | |
"main": "index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "", | |
"license": "ISC", | |
"devDependencies": { | |
"del": "^2.2.2", | |
"event-stream": "^3.3.4", | |
"fs": "0.0.1-security", | |
"glob": "^7.1.1", | |
"gulp": "^3.9.1", | |
"gulp-autoprefixer": "^3.1.1", | |
"gulp-clean-css": "^3.0.4", | |
"gulp-print": "^2.0.1", | |
"gulp-rename": "^1.2.2", | |
"gulp-sass": "^3.1.0", | |
"gulp-sourcemaps": "^2.5.1", | |
"gulp-uglify": "^2.1.2", | |
"stream-combiner2": "^1.1.1", | |
"yargs": "^7.0.2" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment