Occassional Gulpfile freakout using gulp-changed and/or gulp-newer and and upload task

204 Views Asked by At

I've written a nice little build script that runs some pretty standard tasks like...

  • Cleaning out my deploy/ directory before initially
  • Building, concatenation, uglifying, and copying files from their dev/ directories to associated deploy/ directories
  • Watching for changes
  • etc.

But for better context, I've included just included it below:

var gulp              = require('gulp');
var changed           = require('gulp-changed');
var newer             = require('gulp-newer');
var sass              = require('gulp-sass');
var autoprefixer      = require('gulp-autoprefixer');
var cssmin            = require('gulp-minify-css');
var sourcemaps        = require('gulp-sourcemaps');
var concat            = require('gulp-concat');
var uglify            = require('gulp-uglify');
var notify            = require('gulp-notify');
var plumber           = require('gulp-plumber');
var imagemin          = require('gulp-imagemin');
var shopify           = require('gulp-shopify-upload');
var watch             = require('gulp-watch');
var rename            = require('gulp-rename');
var filter            = require('gulp-filter');
var flatten           = require('gulp-flatten');

var del               = require('del');
var argv              = require('yargs').argv;
var runsequence       = require('run-sequence');
var config            = require('./config.json');

var plumberErrorHandler = {
  errorHandler: notify.onError({
    title: 'Gulp',
    message: "Error: <%= error.message %>"
  })
};

gulp.task('styles', function() {
  return gulp.src(['dev/styles/updates.scss'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(sourcemaps.init())
    .pipe(sass({ errLogToConsole: true }))
    .pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10', 'Android >= 4.3'] }))
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '.css', extname: '.liquid' }))
    .pipe(gulp.dest('deploy/assets'));
});

gulp.task('scripts', function() {
  return gulp.src(['dev/scripts/**'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '.js', extname: '.liquid' }))
    .pipe(gulp.dest('deploy/assets'));
});

gulp.task('vendor', function() {
  var styles = filter(['styles/**/*.scss']);
  var scripts = filter(['scripts/**/*.js']);
  return gulp.src(['dev/vendor/**'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(styles)
    .pipe(sass({ errLogToConsole: true }))
    .pipe(cssmin())
    .pipe(styles.restore())
    .pipe(scripts)
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(scripts.restore())
    .pipe(flatten())
    .pipe(gulp.dest('deploy/assets'));
});

gulp.task('copy', function() {
  return gulp.src(['dev/liquid/**'], {base: 'dev/liquid'})
    .pipe(plumber(plumberErrorHandler))
    .pipe(newer('deploy/'))
    .pipe(gulp.dest('deploy/'));
});

gulp.task('clean', function(cb) {
    del(['deploy/**/*'], cb);
});

gulp.task('imagemin', function() {
  return gulp.src(['dev/liquid/assets/*'])
    .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dev/liquid/assets/'));
});

gulp.task('build', ['clean'], function(cb) {
  runsequence(['copy', 'styles', 'scripts', 'vendor'], cb);
});

gulp.task('watch', ['build'], function() {
  gulp.watch(['dev/styles/**/*.scss'], ['styles']);
  gulp.watch(['dev/scripts/**/*.js'], ['scripts']);
  gulp.watch(['dev/vendor/**/*.{js,scss}'], ['vendor']);
  gulp.watch(['dev/liquid/**'], ['copy']);
});

gulp.task('upload', ['watch'], function() {
  if (!argv.env) {
    return false;
  } else if (argv.env && config.shopify.hasOwnProperty(argv.env)) {
    env = config.shopify[argv.env];
  } else {
    env = config.shopify.dev;
  }
  return watch('deploy/{assets|layout|config|snippets|templates|locales}/**')
    .pipe(shopify(env.apiKey, env.password, env.url, env.themeId, env.options));
});

gulp.task('default', ['clean', 'build', 'watch', 'upload']);

The problem I've been running into is directly related to the upload task and copy task.

When running gulp --env [environment-name] (e.g. gulp --env staging) or just gulp --env, some of the time when I save a file living in one of the subdirectories of dev/liquid/, the copy task runs as expected, and the singular saved and copied file is then uploaded via. the upload task. However, occasionally I'll save a file and the copy task runs as usual, but then the watch upload freaks out and tries uploading every file inside of deploy/ (which causes an api call limit error, which naturally gives me problems).

I originally had used gulp-changed inside of my copy task, but then noticed that it only will do 1:1 mappings and not directories (not sure how correct I am on this). So I switched to gulp-newer, and things worked for a while, but then things started freaking out again.

I can't figure out what's causing this, I have my suspicions but I can't figure out how to act on them. Any advice, observations, suggestions for improvements, good places for a romantic dinner, reliable pet-sitter, etc. would be greatly appreciated.

tytytytyty!!!

_t

Edit: I've been having a hard time reproducing the freakout (i.e. all files trying to upload at once), and at times running the same gulp --env staging causes a freak out, and other times firing up the same task on the same set of files does nothing. Maybe it could possibly have something to do with gulp-newer and gulp-changed's use of date modified as its comparison??

Double Edit: Maybe it's a race condition cause it works sometimes, and sometimes not? I remember seeing something on the node-glob or minimatch github pages about race conditions....

0

There are 0 best solutions below