Created
March 11, 2020 10:23
-
-
Save marioloncarek/97dfcbb9096e540e8441f0980acc3ee9 to your computer and use it in GitHub Desktop.
es6 gulp babel browsersync browserify babelify
This file contains 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 autoprefixer from "gulp-autoprefixer"; | |
import babel from "gulp-babel"; | |
import babelify from "babelify"; | |
import browserify from "browserify"; | |
import browserSync from "browser-sync"; | |
import buffer from "vinyl-buffer"; | |
import cleanCSS from "gulp-clean-css"; | |
import concat from "gulp-concat"; | |
import del from "del"; | |
import gulp from "gulp"; | |
import rename from "gulp-rename"; | |
import sass from "gulp-sass"; | |
import sourcemaps from "gulp-sourcemaps"; | |
import source from "vinyl-source-stream"; | |
import uglify from "gulp-uglify"; | |
const paths = { | |
styles: { | |
main: "static/scss/style.scss", | |
src: "static/scss/**/*.scss", | |
dest: "static/dist/", | |
}, | |
scripts: { | |
main: "static/js/index.js", | |
src: "static/js/**/*.js", | |
dest: "static/dist/", | |
}, | |
includes: { | |
node_modules: ["./node_modules"], | |
}, | |
}; | |
const server = browserSync.create(); | |
/* | |
* For small tasks you can export arrow functions | |
*/ | |
export const clean = () => del(["static/dist"]); | |
/* | |
* You can also declare named functions and export them as tasks | |
*/ | |
export function watchStyles() { | |
return gulp.src(paths.styles.src) | |
.pipe(sourcemaps.init()) | |
.pipe(sass({ includePaths: paths.includes.node_modules })) | |
.pipe(sass().on("error", sass.logError)) | |
.pipe(autoprefixer()) | |
.pipe(sourcemaps.write("./")) | |
.pipe(gulp.dest(paths.styles.dest)) | |
.pipe(server.stream()); | |
} | |
export function buildStyles() { | |
return gulp.src(paths.styles.src) | |
.pipe(sass({ includePaths: paths.includes.node_modules })) | |
.pipe(sass().on("error", sass.logError)) | |
.pipe(autoprefixer()) | |
.pipe(cleanCSS()) | |
.pipe(rename({ | |
basename: "style", | |
suffix: ".min", | |
})) | |
.pipe(gulp.dest(paths.styles.dest)); | |
} | |
export function watchScripts() { | |
return browserify({ | |
entries: [paths.scripts.main], | |
transform: [babelify.configure({ presets: ["@babel/preset-env"] })], | |
}) | |
.bundle() | |
.pipe(source("bundle.js")) | |
.pipe(buffer()) | |
.pipe(sourcemaps.init({ "loadMaps": true })) | |
.pipe(sourcemaps.write(".")) | |
.pipe(gulp.dest("./static/dist/")) | |
.pipe(server.stream()); | |
} | |
export function buildScripts() { | |
return gulp.src(paths.scripts.src) | |
.pipe(babel()) | |
.pipe(uglify({ | |
compress: { | |
drop_console: true, | |
}, | |
})) | |
.pipe(concat("bundle.js")) | |
.pipe(gulp.dest(paths.scripts.dest)); | |
} | |
export function reload(done) { | |
server.reload(); | |
done(); | |
} | |
export function serve(done) { | |
server.init({ | |
server: { | |
baseDir: "./", | |
}, | |
}); | |
done(); | |
} | |
export function watchFiles() { | |
gulp.watch(paths.styles.src, gulp.series(watchStyles)); | |
gulp.watch(paths.scripts.src, gulp.series(watchScripts, reload)); | |
} | |
const watch = gulp.series(clean, gulp.parallel(watchStyles, watchScripts), serve, watchFiles); | |
export const build = gulp.series(clean, gulp.parallel(buildStyles, buildScripts)); | |
/* | |
* Export a default task | |
*/ | |
export default watch; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment