-
-
Save robertoentringer/3efb8f1eec537ed5c24b4e5e9dbce599 to your computer and use it in GitHub Desktop.
My Gulpfile using ES6 (Babel), Browserify, BrowserSync, SASS, Sourcemaps, and more...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
... | |
"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" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment