0

I'm working on a personal project. Since I don't have to worry about working with others or deploying from a development environment to a production environment, I am simply modifying files on the server where I am serving my application.

To do this, I use Panic's Transmit (https://panic.com/transmit/), an FTP/SFTP client. Happily for me, it offers FUSE capabilities, so I can mount my server's filesystem onto my local filesystem. I make changes in my text editor, they get saved, they get uploaded automatically.

But my files also need to be processed by Gulp (http://gulpjs.com/) on the server. This part also works. Gulp watches the files, and if they change, it processes them.

Unfortunately these two things do not work well together. When I make a change, I end up with an empty file where I expect a freshly processed file to be.

My hypothesis is that Transmit is not transferring my files atomically. And it doesn't seem to offer the option to do so. Gulp is seeing file changes before Transmit has a chance to upload their content, hence I get empty files.

My question is, what can I do to deal with this? I would prefer to stay as close as possible to my current toolchain, but I am also open to entirely new ways of accomplishing this.

Thanks!

MadEmperorYuri
  • 111
  • 3
  • Make your gulp script smarter? Have it wait until the files have been around a while? – Zoredache Feb 10 '17 at 00:41
  • That turned out to be sorta what I did. Smarter yes, but not by adding a delay. Turns out it was file permissions. See answer below. Thanks, though! – MadEmperorYuri Feb 10 '17 at 00:46

1 Answers1

1

Turns out that file transfer atomicity may have been only half the problem. That is, one thing I did before posting here was make sure that my text editor was atomically. It wasn't, but the problem persisted even after I had fixed that.

The other half was file permissions. Gulp was producing file with permissions that were too restrictive. This was fixed my gulp-chmod (https://www.npmjs.com/package/gulp-chmod). Here is what my working gulpfile.js looks like:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/normalize.scss/sass',
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/styles.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'nested'
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe($.chmod(0o644))
    .pipe(gulp.dest('static/css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});
MadEmperorYuri
  • 111
  • 3