How to use gulp-useref - 10 common examples

var tasks = ['index.html'].map(function(indexPage) {
    var assets = useref.assets({});

    return gulp.src(options.tempFolderPath + '/' + indexPage)
        .pipe(assets)
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(revReplace())  // Force useref to apply the 'rev' method
        .pipe(gulp.dest(options.targetFolderPath + '/webapp'));
  });

gulp.task('useref', ['screenshot'], function () {
  var assets = gulpUseRef.assets({
    searchPath: 'public'
  })

  return gulp.src('public/**/*.html')
    .pipe(assets)
    .pipe(gulpUniqueFiles())
    .pipe(gulpIf('*.css', gulpCleanCSS()))
    .pipe(gulpIf('*.js', gulpUglify()))
    .pipe(gulpRev())
    .pipe(assets.restore())
    .pipe(gulpUseRef())
    .pipe(gulpRevReplace())
    .pipe(gulp.dest('public'))
})

gulp.task('minify', function () {
    var assets = useref.assets();
    var p = require('./package.json');
    return gulp.src('index.html')
        .pipe(assets)
        .pipe(replace('"{{package.json.version}}"', '"' + p.version + '"'))
        .pipe(traceur())
        .pipe(uglify())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('build'));
});

gulp.task('html', ['less', 'ng-templates'], function() {
  var assets = useref.assets(),
      sources = gulp.src('.tmp/templates.js');

  return gulp.src('public/*.html')
    .pipe(inject(sources, {addRootSlash: false}))
    .pipe(assets)
    .pipe(gulpif('*.js', annotate()))
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'));
});

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

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

gulp.task('compress', function() {
  gulp.src('./app/index.html')
    .pipe(useref.assets())
    .pipe(gulpif('*.js', uglify({mangle: false })))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest('./dist'));
});

gulp.task('prod', ['coffee', 'compass', 'clean', 'img'], function () {
    return gulp.src(watched.html)
        .pipe(useref.assets())
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(minifyCss())
        .pipe(cssFilter.restore())
        .pipe(useref.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

gulp.task('build', ['clean'], function() {
  var app = gulp.src('src/index.html')
	.pipe(useref.assets())
	.pipe(gulpif('*.js', uglify()))
	.pipe(gulpif('*.css', minifyCss()))
	.pipe(useref.restore())
	.pipe(useref())
  
  var static = gulp.src(['src/fonts/*', 'src/img/**/*', 'src/sound/*'], { base: 'src' });
  
  return merge(app, static)
    .pipe(gulp.dest('dist'));
});

gulp.task('compress', function() {
  gulp.src('./default.hbs')
  .pipe(useref.assets())
  .pipe(gulpif('*.js', uglify({mangle: false })))
  .pipe(gulpif('*.css', minifyCss()))
  .pipe(gulp.dest('./dist'));
});

function compile(callback) {
  var htmlFilter = filter('*.html');
  var jsFilter = filter('**/*.js');
  var cssFilter = filter('**/*.css');
  var assets;

  return gulp.src(path.join(config.paths.dev, '*.html'))
    .pipe(assets = useref.assets())
    .pipe(jsFilter)
    .pipe(gulpif(config.angular.enabled, ngAnnotate()))
    .pipe(uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(cleanCSS())
    .pipe(cssFilter.restore())
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(htmlFilter)
    .pipe(preprocess({ context: { NODE_ENV: 'production' } }))
    .pipe(gulpif(config.html.minify, minifyHtml(config.html)))
    .pipe(htmlFilter.restore())
    .pipe(gulp.dest(path.join(config.paths.build, '/')))
    .pipe(gulpif(config.build.gzip, gzip()))
    .pipe(gulp.dest(path.join(config.paths.build, '/')))