gulp automation for shopify projects.

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');


function minifiedImages(){
    return gulp.src('./images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./images/min/'));
}

gulp.task('minifiedImages', minifiedImages);

gulp.task('scss', function() {
    //root scss file (import all your partials into here)
    return gulp.src('./scss/main.scss')
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        // add vendor prefixes
        .pipe(autoprefixer())
        // change the file name to be main.scss.liquid file
        .pipe(rename('main.scss.liquid'))
        // remove the extra set of quotations used for escaping the liquid string (we'll explain this in a sec)
        .pipe(replace('"{{', '{{'))
        .pipe(replace('}}"', '}}'))
        // save the file to the theme assets directory
        .pipe(gulp.dest('./assets/'));
});

gulp.task('default', function() {
    // this assumes your sass is in a directory named sass
    //gulp.watch(['./sass/**/*.scss'], ['sass']);
    gulp.watch('./scss/**/*.scss', gulp.series('sass'));
    gulp.watch('./images/*', gulp.series('minifiedImages'))
});