Skip to content

Instantly share code, notes, and snippets.

@pauloiankoski
Last active April 6, 2017 14:10
Show Gist options
  • Save pauloiankoski/cc226422c49301263841a64fa5eb0275 to your computer and use it in GitHub Desktop.
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.
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
/**
* 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' )
});
});
{
"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 &#8250; 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