Описание тега gulp-useref

Описание тега Вопросы с тегом
NoneA gulp plugin that can replace references to non-optimized scripts or stylesheets in HTML files.

gulp-useref is a gulp plugin that can replace references to non-optimized scripts or stylesheets in HTML files. In order to indicate which of the scripts or stylesheets must be optimized a special build block commentary syntax is used:

<!-- build:<type>(alternate search path) <path> -->
List of script or link tags goes here
<!-- endbuild -->

The build block includes the following parameters:

  • type: either js, css or remove (remove deletes the build block entirely without generating an output file)
  • path: the file path of the optimized file, the target output
  • alternate search path (optional): by default the input files are relative to the treated file, this option allows to change that

The example of HTML file using build blocks:

<html>
  <head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <link href="css/three.css" rel="stylesheet">
    <!-- endbuild -->
  </head>
  <body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <script type="text/javascript" src="scripts/three.js"></script>
    <!-- endbuild -->
  </body>
</html>

The resulting HTML file after plugin usage would look like that

<html>
  <head>
    <link rel="stylesheet" href="css/combined.css"/>
  </head>
  <body>
    <script src="scripts/combined.js"></script>
  </body>
</html>

Example of plugin usage:

var gulp = require('gulp');
var useref = require('gulp-useref');

gulp.task('default', function () {
  var assets = useref.assets();

  return gulp.src('my-app/*.html')
    .pipe(assets)
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'));
});

useref.assets call in the example above returns a stream with the concatenated asset files mentioned in the build blocks of the HTML files. restore brings back the contents of previously filtered out HTML files.