Last active
December 15, 2016 09:00
-
-
Save christophengelmayer/25581d8afc158bf3f363234164119bbb to your computer and use it in GitHub Desktop.
Bootstrap Gulp Workflow
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
var gulp = require('gulp'), | |
autoprefixer = require('gulp-autoprefixer'), | |
browserSync = require('browser-sync').create(), | |
concat = require("gulp-concat"), | |
imagemin = require('gulp-imagemin'), | |
sass = require('gulp-sass'), | |
sourcemaps = require('gulp-sourcemaps'), | |
browserify = require('browserify'), | |
babelify = require('babelify'), | |
source = require('vinyl-source-stream'), | |
buffer = require('vinyl-buffer'), | |
uglify = require('gulp-uglify'), | |
config = { | |
src: 'src/', | |
dest: './', | |
url: '%PROXY_URL%', | |
}; | |
// ----------------------- | |
// TASKS | |
// ----------------------- | |
gulp.task('default', ['build', 'watch']); | |
gulp.task('build', ['images','scss', 'js']); | |
gulp.task('images', function () { | |
return gulp.src(config.src+'img/**/*') | |
.pipe(imagemin()) | |
.pipe(gulp.dest(config.dest+'img')) | |
.pipe(browserSync.stream()); | |
}); | |
gulp.task('js', function() { | |
return browserify('./src/js/main.js') | |
.transform(babelify, { "presets": ["es2015"] }) | |
.bundle() | |
.on('error', function(e){ | |
console.log(e.message); | |
this.emit('end'); | |
}) | |
.pipe(source('main.min.js')) | |
.pipe(buffer()).pipe(uglify()) | |
.pipe(gulp.dest('js')) | |
.pipe(browserSync.stream()); | |
}); | |
gulp.task('scss', function () { | |
return gulp.src(config.src+'scss/**/*.scss') | |
.pipe(sourcemaps.init()) | |
.pipe( | |
sass({outputStyle: 'compressed'}) | |
.on('error', sass.logError)) | |
.pipe(autoprefixer({ | |
browsers: ['>1%', 'last 2 versions'], | |
cascade: false | |
})) | |
.pipe(sourcemaps.write('.')) | |
.pipe(gulp.dest(config.dest+'css')) | |
.pipe(browserSync.stream()); | |
}); | |
gulp.task('watch', function () { | |
browserSync.init({ | |
// server: { baseDir: config.dest }, | |
proxy: config.url | |
}); | |
gulp.watch(config.src+'scss/**/*.scss', ['scss']); | |
gulp.watch(config.src+'img/**/*', ['images']); | |
gulp.watch(config.src+'js/**/*', ['js']); | |
gulp.watch(config.dest+'**/*.{html,php,inc}').on('change', browserSync.reload); | |
}); |
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
npm init && npm install --save-dev gulp autoprefixer gulp-autoprefixer browser-sync gulp-concat gulp-imagemin gulp-sass gulp-sourcemaps browserify babelify babel-preset-es2015 vinyl-source-stream vinyl-buffer gulp-uglify |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment