Last active
July 8, 2019 11:54
-
-
Save shansana/2f39a54f5a18d9d889e6f8e7feaed44f to your computer and use it in GitHub Desktop.
Minimal Gulp setup with live reload (BrowserSync) + Sass + Js
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
| 'use strict'; | |
| const autoprefixer = require('gulp-autoprefixer'); | |
| const csso = require('gulp-csso'); | |
| const del = require('del'); | |
| const gulp = require('gulp'); | |
| const sass = require('gulp-sass'); | |
| const uglify = require('gulp-uglify'); | |
| const rename = require("gulp-rename"); | |
| const browserSync = require("browser-sync"); | |
| // paths | |
| const scss_src = './src/scss/*.scss'; | |
| const scss_out = './dist/css'; | |
| const js_src = './src/js/*.js'; | |
| const js_out = './dist/js'; | |
| // Set the supported browsers | |
| const AUTOPREFIXER_BROWSERS = [ | |
| 'ie >= 10', | |
| 'ie_mob >= 10', | |
| 'ff >= 30', | |
| 'chrome >= 34', | |
| 'safari >= 7', | |
| 'opera >= 23', | |
| 'ios >= 7', | |
| 'android >= 4.4', | |
| 'bb >= 10' | |
| ]; | |
| // Task to minify CSS files | |
| gulp.task('styles', function () { | |
| return gulp.src(scss_src) | |
| // Compile SASS files | |
| .pipe(sass({ | |
| outputStyle: 'nested', | |
| precision: 10, | |
| includePaths: ['.'], | |
| onError: console.error.bind(console, 'Sass error:') | |
| })) | |
| // Auto-prefix css styles for cross browser compatibility | |
| .pipe(autoprefixer({Browserslist: AUTOPREFIXER_BROWSERS})) | |
| // Minify the file | |
| .pipe(csso()) | |
| // Output | |
| .pipe(rename({ suffix: '.min' })) | |
| .pipe(gulp.dest(scss_out)) | |
| .pipe(browserSync.stream()); | |
| }); | |
| // Task to minify JavaScript files | |
| gulp.task('scripts', function() { | |
| return gulp.src(js_src) | |
| // Minify the file | |
| .pipe(uglify()) | |
| // Output | |
| .pipe(rename({ suffix: '.min' })) | |
| .pipe(gulp.dest(js_out)) | |
| .pipe(browserSync.stream()); | |
| }); | |
| // Clean output directory | |
| gulp.task('clean', () => del(['dist'])); | |
| // Gulp task to minify all files | |
| gulp.task('default', gulp.series(['clean','styles','scripts'],function () { | |
| // live server | |
| browserSync.init({ | |
| server : './' | |
| }); | |
| gulp.watch('src/**/*.scss', gulp.series('styles')); | |
| gulp.watch('src/**/*.js', gulp.series('scripts')); | |
| gulp.watch('./*.html').on('change', browserSync.reload); | |
| })); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment