joelkrause
10/6/2019 - 10:10 AM

gulpfile.js for compiling sass and js files

gulpfile.js for compiling sass and js files

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;

// This compiles the sass files into one
gulp.task('compile', () => {
    return gulp.src('lib/styles/scss/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('lib/styles/css/'));
});

// This prefixes the compiled sass file
gulp.task('prefix', () =>
    gulp.src('lib/styles/css/main.css')
    .pipe(autoprefixer({
        overrideBrowserslist: ['last 99 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('lib/styles/css'))
);

// This minifies the compiled/prefixed css file
gulp.task('minify-styles', () => {
    return gulp.src('lib/styles/css/main.css')
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('lib/styles/css'));
});

// This merges all scripts that are in the src folder into a new file called scripts.min.js
gulp.task('merge-scripts', function () {
    return gulp.src(['lib/scripts/src/*.js','lib/scripts/scripts.js'])
        .pipe(concat({
            path: 'scripts.min.js'
        }))
        .pipe(gulp.dest('lib/scripts'));
});

// This compresses the new scripts.min.js file
gulp.task('compress-scripts', function () {
    return pipeline(
        gulp.src('lib/scripts/scripts.min.js'),
        uglify(),
        gulp.dest('lib/scripts')
    );
});

// This is the "major" gulp task that watches sass and js files and runs tasks accordingly!
// I am also excluding the new scripts.min.js file from the watch because it caused an inifnite loop of merging/compressing lol
gulp.task('watch', () => {
    gulp.watch('lib/styles/scss/**/*.scss', (done) => {
        gulp.series(['compile', 'prefix', 'minify-styles', 'merge-scripts', 'compress-scripts'])(done);
    });
    gulp.watch(['lib/scripts/**/*.js','!lib/scripts/scripts.min.js'], (done) => {
        gulp.series(['merge-scripts', 'compress-scripts'])(done);
    });
});