Gulp development workflow and the 'dist' folder

Question

I'm relatively new to gulp and am using it as a taskrunner to concatenate and compile .js and sass/css files. Those aspects are currently working in a development environment.

What I'm confused about is a workflow issue. Right now my concatentated files are in these folders:

-css (myapp.css)
-js (myappconcat.js)

If I'm working locally, I don't want to minify these yet for debugging purposes (right?).

However, reading up on gulp, I see that build tasks are normally set up to minify the assets into a 'dist' folder for production. How do I manage this in my HTML files?

For example, in my development HTML file I would have CSS and js includes like so:

<link href="/css/myapp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/myappconcat.js"></script>

However, when I build my minified files to a 'dist' directory, I would have to change the paths in the includes above for every HTML file.

How does one go about managing a gulp build to a dist folder without having to change the paths in each include in the HTML? Similarly, when I minify for production, don't I also have to change the .js and CSS filenames in the HTML includes as well? Or should I be using minified files in development?

EDIT: Here's the basic site structure:

wwwroot
   -.html files
   - gulpfile.js
   - package.json
   /css
     -main.css
   /dist
   /js
   /scss  

AND the gulpfile.js

// Required gulp modules
var gulp      = require('gulp'),
    concat    = require('gulp-concat'),
    uglify    = require('gulp-uglify'),
    rename    = require('gulp-rename'),
    sass      = require('gulp-sass'),
    maps      = require('gulp-sourcemaps'),
    del       = require('del'),
    jshint    = require('gulp-jshint'),
    stylish   = require('jshint-stylish'),
    gutil     = require( 'gulp-util' ),
    merge     = require('merge-stream'),
    imagemin  = require('gulp-imagemin'),
    cleanCSS  = require('gulp-clean-css');

// error reporter in progress
var reportError = function( err ) {

  gutil.beep();

  var title = 'Error';

  if( err.plugin === 'gulp-sass' ) {
    title = 'SCSS Compilation Error';
  }

  var msg = '\n============================================\n\n';
  msg += title += '\n\n';
  msg += err.message + '\n\n';
  msg += '============================================';

  gutil.log( gutil.colors.red( msg ) );

  if( err.plugin === 'gulp-sass' ) {

   this.emit('end');

  }

};

// Concatenate .js files with lint-js as the dependency
gulp.task("concatScripts", ["lint-js"], function() {
   return gulp.src([
       'js/*.js'
       ,'node_modules/jquery-placeholder/jquery.placeholder.js'
       ])
   .pipe(maps.init())
   .pipe(concat('zConcat.js'))
   .pipe(maps.write('./'))
   .pipe(gulp.dest('dist/js'));//write to separate dir than src otherwise 
     overwrites itself!
});

// Minify .js files with concatscripts as the dependency
gulp.task("minifyScripts", ["concatScripts"], function() {
  return gulp.src("dist/js/zConcat.js")
    .pipe(uglify())
    .pipe(rename('zConcat.js'))
    .pipe(gulp.dest('dist/js'));
});

// .js Linter for catching errors when any .js changes
gulp.task('lint-js', function () {
  return gulp.src([
      'js/*.js',       // all custom .js
      //'!_js/public/js/html5shiv.js', // ignore shiv
    ])
    .pipe(jshint())
    .pipe(jshint.reporter(stylish));    // color-coded line by line errors
});

// Compile sass files
gulp.task('compileSass', function() {
  return gulp.src("scss/main.scss")
      .pipe(maps.init())
      .pipe(sass(
       {
       outputStyle: 'expanded'
       }
     ).on( 'error',  reportError) ) //sass.logError
      .pipe(maps.write('./'))
      .pipe(gulp.dest('css'));
});

// Minify CSS after compiling
 gulp.task('minifyCSS', () => {
   return gulp.src('css/*.css')
   .pipe(maps.init())
   .pipe(cleanCSS({compatibility: 'ie8'}))
   .pipe(rename('main.min.css'))
   .pipe(maps.write('./'))
   .pipe(gulp.dest('css'));
});

// Watch and process SASS and .js file changes
gulp.task('watchFiles', function() {
  gulp.watch(['scss/**/*.scss','scss/*.scss'], ['compileSass']);
  gulp.watch( 'css/*.css', ['minifyCSS']);
  gulp.watch('js/**/*.js', ['concatScripts']);
});

Answer 1

this might be late, but no one answered.

For me, I create two production files (or folders if the output is more than one file, with each folder containing a set of files). One is minified, and the other is not.

For development and testing purposes, I use the non-minified version. Once the product is ready for production, I retest but using the minified version, and typically this is the one I release.

So I write my scripts to produce two files (or file sets if I have more than a file to produce).

Hope this helps.