How to work with flat and minified files?

Question

When writing a file .html, .css or .js we use its flat form, but when playing in production we use preferably minified files, usually named .min css., .min js....

The question that brings me here is: in my development environment I use the Gulp to carry out the build process of the files. In the files . html is referencing *.min.css files, as only scanned when applying a gulp build, in the development tasks I simply take the files from the source repository and rename them to *.min.css and *.min.js

See an example of a development task:

gulp.task('scss-to-css', function () {
    return gulp.src(paths.styles.src)
            .pipe(autoprefixer())
            .pipe(sass().on('error', sass.logError))
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('js', function () {
    return gulp.src(paths.scripts.src)
            .pipe(gulpif(prod, uglify()))
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest(paths.scripts.dest));
});

This is the conventional way of working?

Answer 1

Usually the compiled CSS is in . gitignore, going up via GIT for production only the compileable Resources. This is done to prevent future programmers from editing the minified files, "killing" the pre-processing. That is, you run Gulp on the production server, you can automate the server to run Gulp when you pull the server.

Furthermore, Gulp-sourcemap is used in the development environment to see a "beautiful" version of the minified CSS. Usually you call the same CSS or JS file both in production and in homologation. Do you usually concatenate all CSS and JS into one file? Example: app.min.css and app.min.js

Calling these two with Burst cache and sourcemaps already solves much of the problems.

index php.

<link rel="stylesheet" href="css/app.min.css?v=<?=filemtime(__DIR__.'/css/app.min.css')?>">

<script src="js/app.min.js?v=<?=filemtime(__DIR__.'/js/app.min.js')?>"></script>

gulpfile.js

var is_dev = false; // Sourcemaps deixam o .css muito pesado, recomendado só em desenvolvimento

/** Compress JS **/
gulp.task('compress', function() {
  gulp.src( config.scripts )
      .pipe(do_concat('app.min.js'))
      .pipe(uglify().on('error', gutil.log))
      .pipe(gulp.dest('assets/js'));
});

/** Compila SASS -> CSS e minifica  **/
gulp.task('sass', function () {
  if (is_dev) {
    // Dev
    gulp.src(['sass/**/*.scss'])
      .pipe(sassGlob())
      .pipe(sourcemaps.init())
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: config.styles
      }).on('error', sass.logError))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('assets/css'));
  } else {
    // Prod
    gulp.src(['sass/**/*.scss'])
      .pipe(sassGlob())
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: config.styles
      }).on('error', sass.logError))
      .pipe(gulp.dest('assets/css'));
  }

});