Menu icon Foundation
How do you customize SSG production flag?

I'm using the old SSG and I'm a bit confused how to customize the gulp build process with the production flag.

At a minimum, I need to store the folders where project is compiled as a javascript variable so that when I run "gulp" it compiles to the dist folder. But when I run gulp --production it should compile into different folder and cannot have subfolders (its a CMS restriction that is really annoying)...

Any help would be greatly appreciated because I'm using the SSG for several non-profits / human rights organizations.

I included the gulp file I am using if that helps.

var $      = require('gulp-load-plugins')();
var argv   = require('yargs').argv;
var gulp   = require('gulp');
var rimraf = require('rimraf');
var panini = require('panini');
var sequence = require('run-sequence');

////// TO-DO
// OBJECTIVE - Production Arguements for local testing versus Live
// 1). Store folder names as variables
// 2). Create gulp arguements to change the folder files
// 3). PRODUCTION FOLDER CANNOT HAVE SUBFOLDERS
// 4). Partial Folder (in src folder) should have subfolder
// 5). Pages Folder
// 6). Use handlebars helpers or YML to complie with liquid variables IF production flag




// Check for --production flag
var isProduction = !!(argv.production);

var folders = {
  local: [
    'dist',
  ],
  // This folder name changes which is it needs to be stored as a variable...
  live: [
    'live',
  ],
};


// File paths to various assets are defined here.
var paths = {
  assets: [
    'src/assets/**/*',
    '!src/assets/{!img,js,scss}/**/*'
  ],
  sass: [
    'node_modules/foundation-sites/scss',
    //'bower_components/motion-ui/src'
  ],
  javascript: [
    'node_modules/jquery/dist/jquery.js',
    'node_modules/foundation-sites/dist/foundation.js',

    // 'bower_components/scrollClass/scrollClass.js',
    'bower_components/textillate/assets/jquery.fittext.js',
    'bower_components/textillate/assets/jquery.lettering.js',
    'bower_components/textillate/jquery.textillate.js',

    'src/assets/js/**/*.js',
    'src/assets/js/app.js'
  ]
};

// This happens every time a build starts
gulp.task('clean', function(done) {
  rimraf('../sun-dvmedina-5329deecebad64347b000001', done);
});

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
  gulp.src(paths.assets)
    .pipe(gulp.dest('../dist/'));
});

// Copy page templates into finished HTML files
gulp.task('pages', function() {
  gulp.src(
    './src/pages/**/*.html'
    )
    .pipe(panini({
      layouts: './src/layouts/',
      partials: './src/partials/**/*.html',
      data: './src/data/**/*.{json,yml}'
    }))
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist'));
});

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  return gulp.src('./src/assets/scss/app.scss')
    .pipe($.sass({
      includePaths: paths.sass,
      outputStyle: (isProduction ? 'compressed' : 'nested'),
      errLogToConsole: true
    }))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(uncss)
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist/'));
});

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(paths.javascript)
    .pipe($.concat('app.js'))
    .pipe(uglify)
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist/'));
});

// Copy images to the folder variable
// In production, the images are compressed
gulp.task('images', function() {
  var imagemin = $.if(isProduction, $.imagemin({
    progressive: true
  }));
  // This should stay the same
  return gulp.src('./src/assets/img/**/*')
    .pipe(imagemin)
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist/'));
});

// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], done);
});

// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
  return gulp.src('./dist')
    .pipe($.webserver({
      host: 'localhost',
      port: 8000,
      livereload: true,
      open: true
    }));
});

// Build the site, run the server, and watch for file changes
gulp.task('default', 
  [
    'build', 
    // This NOT be used with production flag
    //'server'
  ],
  function() {
    gulp.watch(paths.assets, ['copy']);
    gulp.watch(['./src/pages/**/*.html', './src/layouts/**/*.html'], ['pages']);
    gulp.watch(['./src/assets/scss/**/*.scss'], ['sass']);
    gulp.watch(['./src/assets/js/**/*.js'], ['javascript']);
    gulp.watch(['./src/assets/img/**/*'], ['images']);
  }
);

            

         

gulp

I'm using the old SSG and I'm a bit confused how to customize the gulp build process with the production flag.

At a minimum, I need to store the folders where project is compiled as a javascript variable so that when I run "gulp" it compiles to the dist folder. But when I run gulp --production it should compile into different folder and cannot have subfolders (its a CMS restriction that is really annoying)...

Any help would be greatly appreciated because I'm using the SSG for several non-profits / human rights organizations.

I included the gulp file I am using if that helps.

var $      = require('gulp-load-plugins')();
var argv   = require('yargs').argv;
var gulp   = require('gulp');
var rimraf = require('rimraf');
var panini = require('panini');
var sequence = require('run-sequence');

////// TO-DO
// OBJECTIVE - Production Arguements for local testing versus Live
// 1). Store folder names as variables
// 2). Create gulp arguements to change the folder files
// 3). PRODUCTION FOLDER CANNOT HAVE SUBFOLDERS
// 4). Partial Folder (in src folder) should have subfolder
// 5). Pages Folder
// 6). Use handlebars helpers or YML to complie with liquid variables IF production flag




// Check for --production flag
var isProduction = !!(argv.production);

var folders = {
  local: [
    'dist',
  ],
  // This folder name changes which is it needs to be stored as a variable...
  live: [
    'live',
  ],
};


// File paths to various assets are defined here.
var paths = {
  assets: [
    'src/assets/**/*',
    '!src/assets/{!img,js,scss}/**/*'
  ],
  sass: [
    'node_modules/foundation-sites/scss',
    //'bower_components/motion-ui/src'
  ],
  javascript: [
    'node_modules/jquery/dist/jquery.js',
    'node_modules/foundation-sites/dist/foundation.js',

    // 'bower_components/scrollClass/scrollClass.js',
    'bower_components/textillate/assets/jquery.fittext.js',
    'bower_components/textillate/assets/jquery.lettering.js',
    'bower_components/textillate/jquery.textillate.js',

    'src/assets/js/**/*.js',
    'src/assets/js/app.js'
  ]
};

// This happens every time a build starts
gulp.task('clean', function(done) {
  rimraf('../sun-dvmedina-5329deecebad64347b000001', done);
});

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
  gulp.src(paths.assets)
    .pipe(gulp.dest('../dist/'));
});

// Copy page templates into finished HTML files
gulp.task('pages', function() {
  gulp.src(
    './src/pages/**/*.html'
    )
    .pipe(panini({
      layouts: './src/layouts/',
      partials: './src/partials/**/*.html',
      data: './src/data/**/*.{json,yml}'
    }))
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist'));
});

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  return gulp.src('./src/assets/scss/app.scss')
    .pipe($.sass({
      includePaths: paths.sass,
      outputStyle: (isProduction ? 'compressed' : 'nested'),
      errLogToConsole: true
    }))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(uncss)
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist/'));
});

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(paths.javascript)
    .pipe($.concat('app.js'))
    .pipe(uglify)
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist/'));
});

// Copy images to the folder variable
// In production, the images are compressed
gulp.task('images', function() {
  var imagemin = $.if(isProduction, $.imagemin({
    progressive: true
  }));
  // This should stay the same
  return gulp.src('./src/assets/img/**/*')
    .pipe(imagemin)
    // REWRITE THIS WITH PRODUCTION FLAG ?
    .pipe(gulp.dest('../dist/'));
});

// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], done);
});

// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
  return gulp.src('./dist')
    .pipe($.webserver({
      host: 'localhost',
      port: 8000,
      livereload: true,
      open: true
    }));
});

// Build the site, run the server, and watch for file changes
gulp.task('default', 
  [
    'build', 
    // This NOT be used with production flag
    //'server'
  ],
  function() {
    gulp.watch(paths.assets, ['copy']);
    gulp.watch(['./src/pages/**/*.html', './src/layouts/**/*.html'], ['pages']);
    gulp.watch(['./src/assets/scss/**/*.scss'], ['sass']);
    gulp.watch(['./src/assets/js/**/*.js'], ['javascript']);
    gulp.watch(['./src/assets/img/**/*'], ['images']);
  }
);

            

         
Geoff Kimball over 3 years ago

There's two things you'll want to change here:

First, the name of the destination folder. You can change dist to a variable that changes depending on if you're in production or not.

var distFolder = isProduction ? 'prod-dist' : 'dist';

The first string is the production folder, and the second string is the destination folder.

Second, you want to change how files are copied so that they are always a flat structure. You can use the gulp-flatten plugin to strip the folder structure out of a stream of files, so that every file ends up in the exact same place.

Here's what the pages task would look like with the flatten plugin loaded:

gulp.task('pages', function() {
  gulp.src('./src/pages/**/*.html')
    .pipe(panini({
      layouts: './src/layouts/',
      partials: './src/partials/**/*.html',
      data: './src/data/**/*.{json,yml}'
    }))
    .pipe($.flatten())
    .pipe(gulp.dest('../dist'));
});

Hans McMurdy over 3 years ago

@Geoff Kimball thanks that really helped and is way more simple then I thought.

I had been testing out it with a tree of variables like you use for paths and then gulp-pipes, gulp-preprocess but nothing was really working the way I needed because I'm prototyping with hbs/panini and in production I'm outputting liquid in a flat directory.

I'm so used to using grunt config variables that gulp has been a challenge...

Sweet got it working.

Geoff Kimball over 3 years ago

I don't think gulp-if will work with run-sequence. However, you can use Function.prototype.apply() to pass in the arguments to run-sequence. In this code sample, I'm building an array of function arguments to pass to the sequence() function. In some instances, the array will contain the 'notable' task.

// Initial task list
var tasks = ['clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide'];

// Add notable only in dev
if (!isProduction) {
  tasks.push('notable');
}

// Add done() at the end always
tasks.push(done);

// Run the function with the contents of "tasks" as the arguments
sequence.apply(this, tasks);