minify and combine all js files from an html file

Question

Let's say I've

src/index.html

<head>
<script type="text/javascript" src="js/file1.js"></script>
<script type="text/javascript" src="js/file2.js"></script>
<script type="text/javascript" src="js/file3.js"></script>
</head>

build/index.html

<head>
<script type="text/javascript" src="js/script.min.js"></script>
</head>

Is there a way that some utility can automatically read my html file, minify and combine all js script entries, and copy to build directory. Also removing all those js entries and replacing with output file?

Same with CSS. Please advise.

See gulp-useref for example: https://github.com/jonkemp/gulp-useref and https://stackoverflow.com/questions/21072880/is-there-a-way-to-rewrite-the-html-to-use-gulp-minified-css — Mark, Nov 17 '18 at 18:34

score 0 · Accepted Answer · answered Dec 04 '18 at 06:58

Your folder structure:

gulpfile.js
/src
    index.html
    /css
    /js
       /file1.js
       /file2.js
       /file3.js

/build
    index.html
    /css
    /js

in src/index.html use these comments:

<head>
  <!--build:js js/scripts.min.js -->
  <script type="text/javascript" src="js/file1.js"></script>
  <script type="text/javascript" src="js/file2.js"></script>
  <script type="text/javascript" src="js/file3.js"></script>
  <!-- endbuild -->

  <!--build:css css/styles.min.css-->
  <link href="css/bootstrap.css" rel="stylesheet" />
  <link href="css/mdb.css" rel="stylesheet" />
  <link href="css/styles.css" rel="stylesheet" />
  <!--endbuild-->
</head>

in gulpfile.js write this code:

var gulp = require('gulp');
// This plugin concatenates any number of CSS and JavaScript files into a single file
var useref = require('gulp-useref');
// Requires the gulp-uglify plugin for minifying js files
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
// Requires the gulp-cssnano plugin for minifying css files
var cssnano = require('gulp-cssnano')


gulp.task('build', function () {
    return gulp.src('app/*.html')
      .pipe(useref())
      // Minifies only if it's a JavaScript file
      .pipe(gulpIf('*.js', uglify()))
      // Minifies only if it's a CSS file
      .pipe(gulpIf('*.css', cssnano()))
      .pipe(gulp.dest('dist'))
});

After run the build task in command line, it automatically creates the build folders and internal files.

minify and combine all js files from an html file

1 Answers1