title: How to build a production release with gulp ?
body: <p>I want to build using gulp.</p>
  
  <p>I have made some changes in index.html file in dev folder and css files in and a tmp folder for css.</p>
  
  <p>When I run gulp build:dist it is deleting all my dev files and tmp files and producing some files in new folder dist.</p>
  
  <p>The problem is that it is not compressing the exact same files which I made in the dev folder(after change). It is taking the original files and compressing them.</p>
  
  <p>Here is the content of my gulpfile.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  //////////////////////////////////////////////////////////////////////
  // Plugins                                                          //
  //////////////////////////////////////////////////////////////////////
  
  var gulp = require('gulp');
  var fs = require('fs');
  var request = require('sync-request');
  var runSequence = require('run-sequence');
  var browserSync = require('browser-sync');
  var reload = browserSync.reload;
  var notify = require('gulp-notify');
  var del = require('del');
  var useref = require('gulp-useref');
  var rev = require('gulp-rev');
  var revReplace = require('gulp-rev-replace');
  var revDel = require('gulp-rev-delete-original');
  var size = require('gulp-size');
  var critical = require('critical');
  var ico = require('gulp-to-ico');
  var run = require('gulp-run-command').default;
  var sass = require('gulp-sass');
  var autoprefixer = require('gulp-autoprefixer');
  var sourcemaps = require('gulp-sourcemaps');
  var preprocess = require('gulp-preprocess');
  var handlebars = require('gulp-compile-handlebars');
  
  
  //////////////////////////////////////////////////////////////////////
  // Setup                                                            //
  //////////////////////////////////////////////////////////////////////
  var config = require('./build/build.config.js');
  var templateData = JSON.parse(fs.readFileSync('./variables.js'));
  
  
  //////////////////////////////////////////////////////////////////////
  // Sketch                                                           //
  //////////////////////////////////////////////////////////////////////
  
  //// Export assets from sketch file
  gulp.task('sketch', run('sketchtool export slices --compact=YES --save-for-web=YES sketch/code-test.sketch --output=client/img'))
  
  
  //////////////////////////////////////////////////////////////////////
  // Handlebars                                                       //
  //////////////////////////////////////////////////////////////////////
  
  var hbOptions = {
    ignorePartials: true,
    batch : [config.base + config.partials],
    helpers : {}
  };
  var hbOptionsDist = {
    ignorePartials: true,
    batch : [config.dist + config.partials],
    helpers : {}
  };
  
  //// Inject Handlebar varibles for development
  gulp.task('inject:dev', function(cb) {
    return gulp.src(config.html)
      .pipe(handlebars(templateData, hbOptions))
      .pipe(gulp.dest(config.dev));
  });
  
  //// Inject Handlebar varibles for production
  gulp.task('inject:dist', function(cb) {
    return gulp.src(config.dist + '/**/*.html')
      .pipe(handlebars(templateData, hbOptionsDist))
      .pipe(gulp.dest(config.dist));
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // Images                                                           //
  //////////////////////////////////////////////////////////////////////
  
  //// optimize images and put them in the dist folder
  gulp.task('images', function() {
    return gulp.src(config.images)
      .pipe(gulp.dest(config.dist + '/img'))
      .pipe(size({
        title: 'img'
      }));
  });
  
  //// Create the favicon from the png
  gulp.task('favicon', ['copy:fav'], function() {
    return gulp.src(config.dist + '/favicon.png')
      .pipe(ico('favicon.ico'))
      .pipe(gulp.dest(config.dist));
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // SASS to CSS                                                      //
  //////////////////////////////////////////////////////////////////////
  
  //// Sass compilation, sourcemaps, autoprefixing and minification
  gulp.task('sass', function() {
    return gulp.src(config.mainScss)
      .pipe(sourcemaps.init())
      .pipe(sass())
      .on('error', sass.logError)
      .on("error", notify.onError({
          title: 'SASS ERROR',
      message: '&lt;%= error.message %&gt;',
      sound: true
      }))
      .pipe(autoprefixer({
          browsers: ['last 3 versions'],
          cascade: false
      }))
      .pipe(sourcemaps.write('./maps'))
      .pipe(gulp.dest(config.tmp))
      .pipe(size({
        title: 'sass'
      }));
  });
  gulp.task('sass:dist', function() {
    return gulp.src(config.mainScss)
      .pipe(sass({outputStyle: 'compressed'}))
      .pipe(autoprefixer({
          browsers: ['last 3 versions'],
          cascade: false
      }))
      .pipe(gulp.dest(config.tmp))
      .pipe(size({
        title: 'sass'
      }));
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // Critical CSS                                                     //
  //////////////////////////////////////////////////////////////////////
  
  //// Grabs the critical CSS for a page load and inserts it above the page
  gulp.task('critical', function () {
      return critical.generate({
          inline: true,
          base: './build/dist/',
          src: 'index.html',
          dest: 'index.html',
          width: 1300,
          height: 1000,
          minify: true
      });
  });
  
  //////////////////////////////////////////////////////////////////////
  // Run the REV                                                      //
  //////////////////////////////////////////////////////////////////////
  
  gulp.task('revision', function(){
    return gulp.src([config.dist + '/assets/**/*'])
      .pipe(rev())
      .pipe(revDel())
      .pipe(gulp.dest(config.dist + '/assets/'))
      .pipe(rev.manifest())
      .pipe(gulp.dest(config.dist + '/assets/'));
  });
  
  gulp.task('revisionReplace', function(){
    var manifest = gulp.src(config.dist + "/assets/rev-manifest.json");
  
    return gulp.src(config.dist + '/**/*.html')
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest(config.dist));
  });
  
  //////////////////////////////////////////////////////////////////////
  // HTML Build                                                       //
  //////////////////////////////////////////////////////////////////////
  
  //// Concat CSS &amp; JS files into single files, adds unique cache busting strings
  //// Allows dev/prod if statements to show and hide content based on environment
  gulp.task('html:dev', function() {
    return gulp.src(config.devhtml)
    .pipe(preprocess({context: { NODE_ENV: 'dev'}}))
    .pipe(gulp.dest(config.dev))
  });
  gulp.task('html', function() {
    var manifest = gulp.src("build/dist/assets/rev-manifest.json");
  
    return gulp.src(config.html)
    .pipe(useref({
      searchPath: '{build,client}'
    }))
    .pipe(preprocess({context: { NODE_ENV: 'prod'}}))
    .pipe(gulp.dest(config.dist))
    .pipe(size({
      title: 'html'
    }));
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // Copy                                                             //
  //////////////////////////////////////////////////////////////////////
  
  //// Copy assets in dev folder
  gulp.task('copy:dev', function() {
    return gulp.src([
      config.base + '/**/*',
      '!' + config.base + '/src'
    ])
    .pipe(gulp.dest(config.dev))
    .pipe(size({
      title: 'copy'
    }));
  });
  
  // Copy dev assets
  gulp.task('copy:dev:assets', function() {
    return gulp.src([
      config.base + '/**/*',
      '!' + config.base + '/src',
      '!' + config.base + '/**/*.html'
    ])
    .pipe(gulp.dest(config.dev))
    .pipe(size({
      title: 'copy'
    }));
  });
  
  //// Copy assets in dist folder
  gulp.task('copy', function() {
    return gulp.src([
      config.base + '/*',
      '!' + config.base + '/*.html',
      '!' + config.base + '/src'
    ])
    .pipe(gulp.dest(config.dist))
    .pipe(size({
      title: 'copy'
    }));
  });
  
  //// Copy assets in dist folder
  gulp.task('copy:assets', function() {
    return gulp.src(config.assets, {
      dot: true
    })
    .pipe(gulp.dest(config.dist))
    .pipe(size({
      title: 'copy:assets'
    }));
  });
  
  //// Copy over the social and site config assets and place them in the root of the dist
  gulp.task('copy:fav', function() {
    return gulp.src([
      config.base + '/img/fav/*',
      config.base + '/site-config/*'
    ])
    .pipe(gulp.dest(config.dist))
    .pipe(size({
      title: 'copy:fav'
    }));
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // Clean                                                            //
  //////////////////////////////////////////////////////////////////////
  
  //// Clean temporary directories
  gulp.task('clean', del.bind(null, [config.dev, config.tmp]));
  
  //// Clean build transfered folders
  gulp.task('clean:dist', del.bind(null, [
    'build/dist/scss',
    'build/dist/js',
    'build/dist/vendor',
    'build/dev',
    'build/tmp',
    'build/dist/img/fav',
    'build/dist/site-config'
  ]));
  
  //// Remove partials from live
  gulp.task('clean:partials', del.bind(null, [
    'build/dist/partials'
  ]));
  
  //// Remove manifest from live
  gulp.task('clean:manifest', del.bind(null, [
    'build/dist/assets/rev-manifest.json'
  ]));
  
  
  //////////////////////////////////////////////////////////////////////
  // Builds                                                           //
  //////////////////////////////////////////////////////////////////////
  
  //// Build files for creating a dist release for production
  gulp.task('build:dist', ['clean'], function(cb) {
    runSequence(['build', 'copy', 'copy:assets', 'images'], ['html'], ['revision'], ['revisionReplace'], 'favicon', 'clean:dist', 'inject:dist', 'critical', 'clean:partials', 'clean:manifest', cb);
  });
  
  //// Build files for local development
  gulp.task('build', ['clean'], function(cb) {
    runSequence(['sass:dist', 'copy:dev'], cb);
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // Local server                                                     //
  //////////////////////////////////////////////////////////////////////
  
  //// Run the development server after having built generated files, and watch for changes
  gulp.task('serve', function() {
    runSequence('build', 'inject:dev', 'html:dev', function() {
      browserSync({
        notify: false,
        server: ['build', config.dev]
      });
    });
    gulp.watch(config.html, ['inject:dev'], ['html:dev', reload]);
    gulp.watch(config.scss, ['sass', reload]);
    gulp.watch([config.base + '/**/*', '!' + config.html, '!' + config.scss], ['copy:dev:assets', reload]);
  });
  
  //// Run the prod site packed in the dist folder
  gulp.task('serve:dist', ['build:dist'], function() {
    browserSync({
      notify: false,
      server: [config.dist]
    });
  });
  
  
  //////////////////////////////////////////////////////////////////////
  // Tasks                                                            //
  //////////////////////////////////////////////////////////////////////
  
  //// Default task
  gulp.task('default', ['serve']);</code></pre>
  </div>
  </div>
  </p>