Skip to content

Instantly share code, notes, and snippets.

@tonykwon
Last active July 16, 2017 21:11
Show Gist options
  • Save tonykwon/cae41657942de8ac5c01d346f6c0f794 to your computer and use it in GitHub Desktop.
Save tonykwon/cae41657942de8ac5c01d346f6c0f794 to your computer and use it in GitHub Desktop.
Current workflow
{
"presets": [ "es2015" ]
}
import gulp from 'gulp';
import sass from 'gulp-sass';
import sassBi from 'gulp-sass-bulk-import';
import browserSync from 'browser-sync';
import babel from 'gulp-babel';
import sourcemaps from 'gulp-sourcemaps';
import rename from 'gulp-rename';
import notify from 'gulp-notify';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import del from 'del';
import uglify from 'gulp-uglify';
import size from 'gulp-filesize';
import comebineMq from 'gulp-combine-mq';
import cleanCss from 'gulp-clean-css';
import imagemin from 'gulp-imagemin';
import merge from 'merge-stream';
const GULP_NOTIFY = true;
const BS_PROXY = 'tony.dev',
BS_USE_XIP = false,
BS_ONLINE = true,
BS_OPEN = false; // BS_UI = { port: 3000 }; // false to disable UI
const SRC_ROOT = './__build/',
DST_ROOT = './webroot/';
const NODE_ROOT = './node_modules/',
BOWER_ROOT = './bower_components/';
const _CONFIGS = {
bs: {
proxy: BS_PROXY,
xip: BS_USE_XIP,
online: BS_ONLINE,
open: BS_OPEN
},
styles: {
watch: SRC_ROOT + 'scss/**/*.scss',
src: SRC_ROOT + 'scss/main.scss',
dst: DST_ROOT,
file: 'style.css', // output file name
notify: {
title: 'styles() task completed',
message: 'There were No errors.',
sound: false
}
},
scripts: {
src: [
// NODE_ROOT + '{PACKAGE1}/{JS_FILE1}.js',
// NODE_ROOT + '{PACKAGE2}/{JS_FILE2}.js',
// ...
// BOWER_ROOT+ '{PACKAGE1}/{JS_FILE1}.js',
// BOWER_ROOT+ '{PACKAGE2}/{JS_FILE2}.js',
// ...
SRC_ROOT + 'js/app.js'
],
dst: DST_ROOT,
file: 'scripts.js', // output file name
notify: {
title: 'scripts() task completed',
message: 'There were No errors.',
sound: false
}
},
images: {
src: SRC_ROOT + 'assets/images/**/*.+(jpg|png|jpeg|gif|tiff)',
dst: DST_ROOT + 'assets/images',
notify: {
title: 'images() task completed',
message: 'There were No errors.',
sound: false
}
},
php: {
src : [
DST_ROOT + '**/*.php' // supply more specific path
]
}
};
/* task styles */
export function styles() {
return gulp.src(_CONFIGS.styles.src)
.pipe(size())
.pipe(sourcemaps.init())
.pipe(sassBi())
.pipe(sass({
}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(rename(_CONFIGS.styles.file))
.pipe(gulp.dest(_CONFIGS.styles.dst))
.pipe(size())
.pipe(browserSync.stream())
.pipe(gulpif(GULP_NOTIFY, notify(_CONFIGS.styles.notify)));
}
/* task scripts */
export function scripts() {
return gulp.src(_CONFIGS.scripts.src)
.pipe(size())
.pipe(concat(_CONFIGS.scripts.file))
.pipe(gulp.dest(_CONFIGS.scripts.dst))
.pipe(size())
.pipe(browserSync.reload({stream: true, once: true}))
.pipe(gulpif(GULP_NOTIFY, notify(_CONFIGS.scripts.notify)));
}
/* task images */
export function images() {
return gulp.src(_CONFIGS.images.src)
.pipe(size())
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(_CONFIGS.images.dst))
.pipe(size())
.pipe(gulpif(GULP_NOTIFY, notify(_CONFIGS.images.notify)));
}
// in case we need to remove intermediate files
//
// const clean = () => del([
// DST_ROOT + 'assets/images/*',
// DST_ROOT + _CONFIGS.styles.dst,
// DST_ROOT + _CONFIGS.scripts.dst
// ]);
// export { clean };
/* tasks for production */
export function minifyStyles() {
return gulp.src(_CONFIGS.styles.dst + _CONFIGS.styles.file)
.pipe(size())
.pipe(comebineMq())
.pipe(cleanCss({}))
.pipe(gulp.dest(_CONFIGS.styles.dst))
.pipe(size());
}
export function minifyScripts() {
var scripts = gulp.src(_CONFIGS.scripts.dst + _CONFIGS.scripts.file)
.pipe(size())
.pipe(uglify())
.pipe(gulp.dest(_CONFIGS.scripts.dst))
.pipe(size());
// in case we have additional scripts to prepare, process them then use merge()
return scripts; // merge(scripts, ...);
}
const production = gulp.series(
gulp.parallel(
minifyStyles,
minifyScripts
)
);
export { production };
/* default task */
export function watch() {
browserSync.init(_CONFIGS.bs);
gulp.watch(_CONFIGS.scripts.src, scripts);
gulp.watch(_CONFIGS.styles.watch, styles);
gulp.watch(_CONFIGS.images.src, images);
gulp.watch(_CONFIGS.php.src).on('change', browserSync.reload);
}
export default watch;
{
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.24.1",
"gulp-babel": "^6.1.2",
"gulp-combine-mq": "^0.4.0",
"gulp-sass": "^3.1.0",
"gulp-sass-bulk-import": "^1.0.1",
"webpack": "^2.6.1"
},
"dependencies": {
"browser-sync": "^2.18.12",
"del": "^3.0.0",
"global": "^4.3.2",
"globby": "^6.1.0",
"gulp": "gulpjs/gulp.git#4.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-changed": "^3.1.0",
"gulp-clean-css": "^3.4.2",
"gulp-cli": "^1.3.0",
"gulp-combine-media-queries": "^0.2.0",
"gulp-concat": "^2.6.1",
"gulp-filesize": "^0.0.6",
"gulp-filter": "^5.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.1",
"gulp-shell": "^0.6.3",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"merge-stream": "^1.0.1",
"node-sass-globbing": "^0.0.23",
"normalize-opentype.css": "^0.2.4",
"npm": "^5.0.3",
"object-fit": "^0.4.3",
"parse-filepath": "^1.0.1",
"pretty-hrtime": "^1.0.3",
"require-dir": "^0.3.2",
"run-sequence": "^1.2.2",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.9.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment