How to work with flat and minified files?

Question

How to work with flat and minified files?

Navigation

#1 by (0 votes)

0

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

The question that brings me here is: in my development environment I use gulp to perform the process of building the files. In the .html files I'm referring to * .min.css files, as only mined when applying a gulp build , in development tasks I simply get the files from the source and rename repository to * .min.css and * .min .js

See an example 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));
});

Is this the conventional way of working?

npm front-end gulp

asked by anonymous 20.11.2017 / 22:14

1 answer

Problem with Pytest Ajax data - Paging

score 0 · Answer 1

Generally the compiled CSS stays in .gitignore, uploading via GIT to production only the compilable resources. This is done to prevent future programmers from editing the minified files, "killing" preprocessing. That is, you run the gulp on the production server, you can automate the server to run the gulp when it pulls the server.

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

Calling these two with burst cache and sourcemaps already solves many 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'));
  }

});