Skip to content

Instantly share code, notes, and snippets.

@inerba
Created May 2, 2018 20:12
Show Gist options
  • Save inerba/cc78017ec8c403f117d30158f4e6be8e to your computer and use it in GitHub Desktop.
Save inerba/cc78017ec8c403f117d30158f4e6be8e to your computer and use it in GitHub Desktop.
GULP, scss, es6, babel, browserify
var babelify = require('babelify');
var browserSync = require('browser-sync');
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var gulp = require('gulp');
var plugins = require('gulp-load-plugins');
var source = require('vinyl-source-stream');
/* Configuration */
var config = {
filename: 'my-awesome-app',
src: {
scss: './src/scss/**/*.scss',
js: './src/scripts/**/*.js',
jsEntry: './src/scripts/main.js'
}
};
/* Development */
gulp.task('development', ['scripts', 'styles'], () => {
browserSync({
'server': './',
'snippetOptions': {
'rule': {
'match': /<\/body>/i,
'fn': (snippet) => snippet
}
}
});
gulp.watch(config.src.scss, ['styles']);
gulp.watch(config.src.js, ['scripts']);
gulp.watch('./*.html', browserSync.reload);
});
/* Scripts */
gulp.task('scripts', () => {
return browserify({
'entries': [config.src.jsEntry],
'debug': true,
'transform': [
babelify.configure({
'presets': ['env']
})
]
})
.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(config.filename +'.js'))
.pipe(buffer())
.pipe(plugins().sourcemaps.init({'loadMaps': true}))
.pipe(plugins().sourcemaps.write('.'))
.pipe(gulp.dest('./dist/js/'))
.pipe(browserSync.stream());
});
/* Styles */
gulp.task('styles', () => {
return gulp.src(config.src.scss)
.pipe(plugins().sourcemaps.init())
.pipe(plugins().sass().on('error', plugins().sass.logError))
.pipe(plugins().sourcemaps.write())
.pipe(plugins().autoprefixer())
.pipe(plugins().rename(config.filename +'.css'))
.pipe(gulp.dest('./dist/css/'))
.pipe(browserSync.stream());
});
/* Cssmin */
gulp.task('cssmin', () => {
return gulp.src(config.src.scss)
.pipe(plugins().sass({
'outputStyle': 'compressed'
}).on('error', plugins().sass.logError))
.pipe(plugins().rename(config.filename +'.min.css'))
.pipe(gulp.dest('./dist/css/'));
});
/* Jsmin */
gulp.task('jsmin', () => {
var envs = plugins().env.set({
'NODE_ENV': 'production'
});
return browserify({
'entries': [config.src.jsEntry],
'debug': false,
'transform': [
babelify.configure({
'presets': ['env']
})
]
})
.bundle()
.pipe(source(config.filename +'.js'))
.pipe(envs)
.pipe(buffer())
.pipe(plugins().uglify())
.pipe(envs.reset)
.pipe(plugins().rename(config.filename +'.min.js'))
.pipe(gulp.dest('./dist/js/'));
});
/* Taks */
gulp.task('default', ['development']);
gulp.task('deploy', ['cssmin', 'jsmin']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment