Uploading Theme to Media Temple

Hi Folks,

I’ve been wrestling with this for a few hours now so I thought I’d give the forum a shot. I’m trying to upload my theme to Media Temple - how would I go about doing so? I’m looking for the quickest way possible, it’s just so that I can show the client the finalised theme.

I’ve ran gulp --production, I’ve then tried to upload via FTP and this didn’t work - the site renders all over the place. I’ve also tried Zipping the folder and uploading via the theme uploader and that didn’t work at all.

Any help or pointers would be greatly appreciated.

Cheers,

Jamie

What do you mean with this?
And do you use Bedrock too or only Sage?

Hi,

I’m just using Sage.

I’ve just downloaded Sage from GitHub and uploaded to my themes and everything worked normally (via Zip and theme uploader) but when I run gulp --production and compress my own theme all styles are gone and I get fatal errors.

Hard to tell without seeing the actual errors.
Did you run npm install & bower install after cloning/downloading the theme?

Hi,

Yes I ran npm install and bower, development went incredibly well and it’s the most that I’ve every enjoyed developing a WordPress theme that’s for sure, I just can’t get it live…

I thought that if I ran gulp --production I would then be able to upload the theme via FTP or compress it and upload via WordPress but I take it that’s not the case?

Yes that should work!
What exactly isn’t rendered correctly? Any errors in the console? Does it load the stylesheets correctly? Is the dist folder uploaded correctly?

These are the errors that I’m currently getting:

http://7f8.3cb.mwp.accessdomain.com/wp-content/themes/border-biscuits/dist/styles/main.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://7f8.3cb.mwp.accessdomain.com/wp-content/themes/border-biscuits/dist/images/wot_small.png Failed to load resource: the server responded with a status of 404 (Not Found)
http://7f8.3cb.mwp.accessdomain.com/wp-content/themes/border-biscuits/dist/styles/main.css Failed to load resource: the server responded with a status of 404 (Not Found)

Thanks for helping me out here!

If you ran gulp --production then there should be an assets.json file in the dist folder. There should also be versioned assets.

My guess is that assets.json is not uploaded, so it is looking for the regular files, but you somehow uploaded the versioned assets?

https://github.com/roots/sage/blob/master/lib/assets.php#L48-L57

1 Like

Hmm, if you run gulp --production it should load a versioned main stylesheet, something like: main-gtfahwq.css
Can you check if a assets.json is created inside the dist folder and what the content is of that file?

Here’s the contents of the assets.json:

{
 "border-scripts.js": "border-scripts-b4df78aaa0.js",
 "customizer.js": "customizer-2d71a5cf56.js",
 "ekko-lightbox.js": "ekko-lightbox-b6f6ebabda.js",
 "jquery.js": "jquery-51908e88d3.js",
 "main.js": "main-2a7e974bd2.js"
}

Should the CSS be in here as well and for some reason its just not loading?

But it’s not loading those: http://7f8.3cb.mwp.accessdomain.com/wp-content/themes/border-biscuits/dist/styles/main.css Failed to load resource: the server responded with a status of 404 (Not Found)

My styles are being uploaded under these versions:

main-ie-577ef5443f.css
main-3e572ff491.css
main-3e572ff491-blessed1.css

Should these be added to the assets.json?

I’ll go with Yes - I manually added them and now it’s working…

I take it there’s a problem with another file then?

Massive thank you to you both for taking the time to help me here!

Jup, your css files should be in there as well, but it should be added automatically. Did you alter your manifest.json in your assets folder?

This is what the manifest.json currently looks like:

{
  "dependencies": {
"main.js": {
  "vendor":[
    "../../plugins/contact-form-7/includes/js/scripts.js"
  ],
  "files": [
    "scripts/main.js"
  ],
  "main": true
},
"main.css": {
"vendor": [
    "../../plugins/contact-form-7/includes/css/styles.css"
],
  "files": [
    "styles/main.scss"
  ],
  "main": true
},
"main-ie.css": {
  "files": [
    "styles/main-ie.scss"
  ]
},
"customizer.js": {
  "files": [
    "scripts/customizer.js"
  ]
},
"border-scripts.js": {
  "files": [
    "scripts/border-scripts.js"
  ]
},
"offnav.js": {
  "files": [
    "scripts/offnav.js"
  ]
},
"ekko-lightbox.js": {
  "files": [
    "scripts/ekko-lightbox.js"
  ]
},
"jquery.js": {
  "bower": ["jquery"]
}
  },
  "config": {
"devUrl": "border-biscuits:8888"
  }
}

Initially the full assets folder didn’t upload, I’ve only just noticed this and uploaded it now - could this possibly be what was going wrong?

No, your assets folder is not used at all on your production server. Did you see any errors in your console when running gulp --production?

Not that I noticed, no.

Do you think that it could be something to do with my use of gulp-bless - I’ve just noticed that other users were having issues with it.

Here’s my gulpfile:

// ## Globals
var argv         = require('minimist')(process.argv.slice(2));
var autoprefixer = require('gulp-autoprefixer');
var browserSync  = require('browser-sync').create();
var changed      = require('gulp-changed');
var concat       = require('gulp-concat');
var flatten      = require('gulp-flatten');
var gulp         = require('gulp');
var gulpif       = require('gulp-if');
var imagemin     = require('gulp-imagemin');
var jshint       = require('gulp-jshint');
var lazypipe     = require('lazypipe');
var less         = require('gulp-less');
var merge        = require('merge-stream');
var minifyCss    = require('gulp-minify-css');
var plumber      = require('gulp-plumber');
var rev          = require('gulp-rev');
var runSequence  = require('run-sequence');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var uglify       = require('gulp-uglify');
var bless        = require('gulp-bless');

// See https://github.com/austinpray/asset-builder
var manifest = require('asset-builder')('./assets/manifest.json');

// `path` - Paths to base asset directories. With trailing slashes.
// - `path.source` - Path to the source files. Default: `assets/`
// - `path.dist` - Path to the build directory. Default: `dist/`
var path = manifest.paths;

// `config` - Store arbitrary configuration values here.
var config = manifest.config || {};

// `globs` - These ultimately end up in their respective `gulp.src`.
// - `globs.js` - Array of asset-builder JS dependency objects. Example:
//   ```
//   {type: 'js', name: 'main.js', globs: []}
//   ```
// - `globs.css` - Array of asset-builder CSS dependency objects. Example:
//   ```
//   {type: 'css', name: 'main.css', globs: []}
//   ```
// - `globs.fonts` - Array of font path globs.
// - `globs.images` - Array of image path globs.
// - `globs.bower` - Array of all the main Bower files.
var globs = manifest.globs;

// `project` - paths to first-party assets.
// - `project.js` - Array of first-party JS assets.
// - `project.css` - Array of first-party CSS assets.
var project = manifest.getProjectGlobs();

// CLI options
var enabled = {
    // Split minified css when '--production'
    split: argv.production, 
  // Enable static asset revisioning when `--production`
  rev: argv.production,
  // Disable source maps when `--production`
  maps: !argv.production,
  // Fail styles task on error when `--production`
  failStyleTask: argv.production,
  // Fail due to JSHint warnings only when `--production`
  failJSHint: argv.production,
  // Strip debug statments from javascript when `--production`
  stripJSDebug: argv.production
};

// Path to the compiled assets manifest in the dist directory
var revManifest = path.dist + 'assets.json';

// ## Reusable Pipelines
// See https://github.com/OverZealous/lazypipe

// ### CSS processing pipeline
// Example
// ```
// gulp.src(cssFiles)
//   .pipe(cssTasks('main.css')
//   .pipe(gulp.dest(path.dist + 'styles'))
// ```
var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(!enabled.failStyleTask, plumber());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return gulpif('*.less', less());
    })
    .pipe(function() {
      return gulpif('*.scss', sass({
        outputStyle: 'nested', // libsass doesn't support expanded yet
        precision: 10,
        includePaths: ['./node_modules/compass-mixins/lib'],
        errLogToConsole: !enabled.failStyleTask
      }));
    })
    .pipe(concat, filename)
    .pipe(autoprefixer, {
      browsers: [
        'last 2 versions',
        'android 4',
        'opera 12'
      ]
    })
    .pipe(minifyCss, {
      advanced: false,
      rebase: false
    })
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.', {
        sourceRoot: 'assets/styles/'
      }));
    })();
};

// ### JS processing pipeline
// Example
// ```
// gulp.src(jsFiles)
//   .pipe(jsTasks('main.js')
//   .pipe(gulp.dest(path.dist + 'scripts'))
// ```
var jsTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(concat, filename)
    .pipe(uglify, {
      compress: {
        'drop_debugger': enabled.stripJSDebug
      }
    })
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.', {
        sourceRoot: 'assets/scripts/'
      }));
    })();
};

// ### Write to rev manifest
// If there are any revved files then write them to the rev manifest.
// See https://github.com/sindresorhus/gulp-rev
var writeToManifest = function(directory) {
  return lazypipe()
    .pipe(function () {
       return gulpif('*.css', bless());
    })
    .pipe(gulp.dest, path.dist + directory)
    .pipe(browserSync.stream, {match: '**/*.{js,css}'})
    .pipe(rev.manifest, revManifest, {
      base: path.dist,
      merge: true
    })
    .pipe(gulp.dest, path.dist)();
};

// ## Gulp tasks
// Run `gulp -T` for a task summary

// ### Styles
// `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
// By default this task will only log a warning if a precompiler error is
// raised. If the `--production` flag is set: this task will fail outright.
gulp.task('styles', ['wiredep'], function() {
  var merged = merge();
  manifest.forEachDependency('css', function(dep) {
    var cssTasksInstance = cssTasks(dep.name);
    if (!enabled.failStyleTask) {
      cssTasksInstance.on('error', function(err) {
        console.error(err.message);
        this.emit('end');
      });
    }
    merged.add(gulp.src(dep.globs, {base: 'styles'})
      .pipe(cssTasksInstance));
  });
  return merged
    .pipe(writeToManifest('styles'));
});

// ### Scripts
// `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
// and project JS.
gulp.task('scripts', ['jshint'], function() {
  var merged = merge();
  manifest.forEachDependency('js', function(dep) {
    merged.add(
      gulp.src(dep.globs, {base: 'scripts'})
        .pipe(jsTasks(dep.name))
    );
  });
  return merged
    .pipe(writeToManifest('scripts'));
});

// ### Fonts
// `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
// structure. See: https://github.com/armed/gulp-flatten
gulp.task('fonts', function() {
  return gulp.src(globs.fonts)
    .pipe(flatten())
    .pipe(gulp.dest(path.dist + 'fonts'))
    .pipe(browserSync.stream());
});

// ### Images
// `gulp images` - Run lossless compression on all the images.
gulp.task('images', function() {
  return gulp.src(globs.images)
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
    }))
    .pipe(gulp.dest(path.dist + 'images'))
    .pipe(browserSync.stream());
});

// ### JSHint
// `gulp jshint` - Lints configuration JSON and project JS.
gulp.task('jshint', function() {
  return gulp.src([
    'bower.json', 'gulpfile.js'
  ].concat(project.js))
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
    .pipe(gulpif(enabled.failJSHint, jshint.reporter('fail')));
});


// ### Bless
gulp.task('bless', function() {  
	return gulp.src(path.dist + 'styles/*.css')
  .pipe(bless())
  .pipe(gulp.dest(path.dist + 'styles'));
});



// ### Clean
// `gulp clean` - Deletes the build folder entirely.
gulp.task('clean', require('del').bind(null, [path.dist]));

// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. Specify the hostname of your dev server at
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
  browserSync.init({
    files: ['{lib,templates}/**/*.php', '*.php'],
    proxy: config.devUrl,
    snippetOptions: {
      whitelist: ['/wp-admin/admin-ajax.php'],
      blacklist: ['/wp-admin/**']
    }
  });
  gulp.watch([path.source + 'styles/**/*'], ['styles']);
  gulp.watch([path.source + 'styles/**/*'], ['bless']);
  gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
  gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
  gulp.watch([path.source + 'images/**/*'], ['images']);
  gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
});

// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', function(callback) {
  runSequence('styles',
              'bless',
              'scripts',
              ['fonts', 'images'],
              callback);
});

// ### Wiredep
// `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See
// https://github.com/taptapship/wiredep
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;
  return gulp.src(project.css)
    .pipe(wiredep())
    .pipe(changed(path.source + 'styles', {
      hasChanged: changed.compareSha1Digest
    }))
    .pipe(gulp.dest(path.source + 'styles'));
});

// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
  gulp.start('build');
});

At least things are kind of working now, though.

First of all I was wundering why you are creating so many separate scripts like: border-scripts.js, offnav.js, ekko-lightbox.js? If they are not available through bower, you can always add them to the main.js by adding them to the vendor array.

Well not really, everytime you run gulp --production, you will have to manually insert your stylesheet names in your assets.json

Yeah, most definitely! Look at my last post in that topic.
Removing this line from your writeToManifest function should do the trick:

.pipe(function () {
  return gulpif('*.css', bless());
})

Let me know if this works!

3 Likes

That did the trick! Everything is now writing the assets.json.

Thank you so much for you help over the past two days, it’s much appreciated.

Cheers,

Jamie

2 Likes