JSFiddle - React, Tailwind, and code Playground
JavaScript
/*Task summaries
NAME |FUNCTION
==============
gulp | Cleans folders, builds site and starts localhost
gulp --rev | As above but adds versioning to CSS and JS
*/
// Reqs
// ============
// Load plugins in packages.json automatically
var gulp = require('gulp'),
wiredep = require('wiredep').stream,
argv = require('yargs').argv,
gulpsync = require('gulp-sync')(gulp),
plugins = require('gulp-load-plugins')({
pattern: ['*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true});
// Variables
// ============
// Define variables used within this gulp file
var paths = {
lib: '.lib',
tmp: '.tmp',
dev: '_dev',
pub: '_prod',
config: 'setup.json'
};
// Clean
// ============
// Cleaning tasks for builds
gulp.task('clean:tmp', function () {
return plugins.del([
paths.tmp+'/**/*',
]);
});
gulp.task('clean:pub', function () {
return plugins.del([
paths.pub+'/**/*',
]);
});
gulp.task('clean:html', function () {
return plugins.del([
paths.tmp+'/*.html'
]);
});
// Inject deps
// ============
// Inject SASS imports
gulp.task('inject-deps', function() {
// Auto inject SASS
gulp.src(paths.dev+'/style/style.scss')
.pipe(plugins.inject(gulp.src('components/**/*.scss', {read: false, cwd:paths.dev+'/style/'}), {
relative: true,
starttag: '/* inject:imports */',
endtag: '/* endinject */',
transform: function (filepath) {
return '@import "' + filepath + '";';
}
}))
.pipe(gulp.dest(paths.dev+'/style'));
// Auto inject JS
gulp.src(paths.dev+'/html/includes/_under.html')
.pipe(plugins.inject(gulp.src('components/**/*.js', {read: false, cwd:paths.dev+'/script/'}), {
relative: true,
ignorePath: '../../',
starttag: '<!-- inject:imports -->',
endtag: '<!-- endinject -->',
transform: function (filepath) {
return '<script src="' + filepath + '"></script>';
}
}))
.pipe(gulp.dest(paths.dev+'/html/includes/'));
});
// HTML
// ============
// HTML tasks such as...