Skip to content

Instantly share code, notes, and snippets.

@marceloogeda
Last active December 6, 2022 17:12
Show Gist options
  • Save marceloogeda/5a449caa50462ab2667540a93d34009f to your computer and use it in GitHub Desktop.
Save marceloogeda/5a449caa50462ab2667540a93d34009f to your computer and use it in GitHub Desktop.
My Gulpfile using ES6 (Babel), Browserify, BrowserSync, SASS, Sourcemaps, and more...
import critical from 'critical';
import babelify from 'babelify';
import browserSync from 'browser-sync';
import browserify from 'browserify';
import buffer from 'vinyl-buffer';
import gulp from 'gulp';
import plugins from 'gulp-load-plugins';
import source from 'vinyl-source-stream';
/* ----------------- */
/* Development
/* ----------------- */
gulp.task('development', ['scripts', 'styles'], () => {
browserSync({
'server': './',
'snippetOptions': {
'rule': {
'match': /<\/body>/i,
'fn': (snippet) => snippet
}
}
});
gulp.watch('./client/scss/**/*.scss', ['styles']);
gulp.watch('./client/scripts/**/*.js', ['scripts']);
gulp.watch('./*.html', browserSync.reload);
});
/* ----------------- */
/* Scripts
/* ----------------- */
gulp.task('scripts', () => {
return browserify({
'entries': ['./client/scripts/main.js'],
'debug': true,
'transform': [
babelify.configure({
'presets': ['es2015', 'react']
})
]
})
.bundle()
.on('error', function () {
var args = Array.prototype.slice.call(arguments);
plugins().notify.onError({
'title': 'Compile Error',
'message': '<%= error.message %>'
}).apply(this, args);
this.emit('end');
})
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(plugins().sourcemaps.init({'loadMaps': true}))
.pipe(plugins().sourcemaps.write('.'))
.pipe(gulp.dest('./build/js/'))
.pipe(browserSync.stream());
});
/* ----------------- */
/* Styles
/* ----------------- */
gulp.task('styles', () => {
return gulp.src('./client/scss/**/*.scss')
.pipe(plugins().sourcemaps.init())
.pipe(plugins().sass().on('error', plugins().sass.logError))
.pipe(plugins().sourcemaps.write())
.pipe(gulp.dest('./build/css/'))
.pipe(browserSync.stream());
});
/* ----------------- */
/* HTML
/* ----------------- */
gulp.task('html', ['cssmin'], () => {
return gulp.src('index.html')
.pipe(critical.stream({
'base': 'build/',
'inline': true,
'extract': true,
'minify': true,
'css': ['./build/css/style.css']
}))
.pipe(gulp.dest('build'));
});
/* ----------------- */
/* Cssmin
/* ----------------- */
gulp.task('cssmin', () => {
return gulp.src('./client/scss/**/*.scss')
.pipe(plugins().sass({
'outputStyle': 'compressed'
}).on('error', plugins().sass.logError))
.pipe(gulp.dest('./build/css/'));
});
/* ----------------- */
/* Jsmin
/* ----------------- */
gulp.task('jsmin', () => {
var envs = plugins().env.set({
'NODE_ENV': 'production'
});
return browserify({
'entries': ['./client/scripts/main.js'],
'debug': false,
'transform': [
babelify.configure({
'presets': ['es2015', 'react']
})
]
})
.bundle()
.pipe(source('bundle.js'))
.pipe(envs)
.pipe(buffer())
.pipe(plugins().uglify())
.pipe(envs.reset)
.pipe(gulp.dest('./build/js/'));
});
/* ----------------- */
/* Taks
/* ----------------- */
gulp.task('default', ['development']);
gulp.task('deploy', ['html', 'jsmin']);
{
...
"devDependencies": {
"babel-core": "^6.7.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-register": "^6.9.0",
"babelify": "^7.3.0",
"browser-sync": "^2.12.10",
"browserify": "^13.0.1",
"critical": "^0.7.2",
"eslint": "^0.18.0",
"eslint-loader": "^0.9.0",
"eslint-plugin-react": "^2.0.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-env": "^0.4.0",
"gulp-load-plugins": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}
@multiplehats
Copy link

Thanks! Super helpful

@BBaysinger
Copy link

Might be even more helpful if you could show us the file structure. ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment