gulp common plug-ins use the gulp-useref

More gulp common plug-ins use please visit: gulp common plug-ins summary

gulp-useref This is a reference to a plurality of HTML and CSS JS may be combined together to reduce the number of dependent files, thereby reducing the number of requests initiated by the browser. According to gulp-useref HTML comment will need to merge in a compressed block to find out, for all the files within a block to merge. Note: it is responsible for the merger, it is not responsible for compression! , If you need to do other operations, you can meet gulp-ifplugin.

Greater use of the document, please click visit gulp-useref tool official website .

installation

A key installation much explanation

npm install --save-dev gulp-useref

use

The following example will parse the HTML building blocks, to replace it and pass those files. Construction of assets within the block and will also be passed in series through the flow.

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

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

With the option of:

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

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref({ searchPath: '.tmp' }))
        .pipe(gulp.dest('dist'));
});

If you want to compress or perform some other modifications, you can use the gulp-ifassets conditionally handle particular types.

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-clean-css');

gulp.task('html', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});

The above is in gulpfile.jsthe calling code, but also need to write some code in the HTML used in conjunction with, let's take a look at how with the use of html is needed.

<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

type(Type): can be js, cssor remove; removewill completely remove the building blocks, but not the files
alternate search pathLower (alternative search paths) :( optional) By default, the input file is processed with respect to the file. Alternative search path allow to change this path. The path may also include the use of braces JSON array notation (e.g.) a series of right-to-left path processing .
path: File file path optimization, the target output
parameters(Parameters): It should be added to other parameters tab

Example of a complete form as follows:

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.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>
    <!-- endbuild -->
</body>
</html>

The generated HTML would be:

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

API

useref（options [，transformStream1 [，transformStream2 [，...]]]）

Returns a stream that contains the results of the HTML file from the HTML replacing assets and assets in series to build an internal file blocks. Support userefof all the options.

Transform Streams (commutations)
Type: Stream
Default: none

Prior to the merger assets conversion. For example, to integrate the source map:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    useref = require('gulp-useref'),
    lazypipe = require('lazypipe');

gulp.task('default', function () {
    return gulp.src('index.html')
        .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true })))
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('dist'));
});

Options

options.searchPath
type: Stringor Array
default value: none
Specifies the position of the current working directory search for files with assets. It can be a string or a string array.
options.base
type: String
Default: process.cwd()
Specifies relative cwd output folder.
options.noAssets
Type: Boolean
Default: false
skip assets, deal with only HTML files.
options.noconcat
type: Boolean
Default: false
skipped in series, but adding all the assets to the stream.
options.newLine
type: String
Default: none
add the string should be separated by a series of files.
options.additionalStreams
Type: Array<Stream>
Default: none
the use of other assets as a source of flow. It helps gulp-userefconjunction with preprocessing tool. For example, TypeScriptwith the use of

var ts = require('gulp-typescript');

// create stream of virtual files
var tsStream = gulp.src('src/**/*.ts')
        .pipe(ts());

gulp.task('default', function () {
    // use gulp-useref normally
    return gulp.src('src/index.html')
        .pipe(useref({ additionalStreams: [tsStream] }))
        .pipe(gulp.dest('dist'));
});

options.transformPath
Type: Function
Default: none
If you need to modify the path before you search, add transformPath function.

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

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref({
            transformPath: function(filePath) {
                return filePath.replace('/rootpath','')
            }
        }))
        .pipe(gulp.dest('dist'));
});

gulp common plug-ins use the gulp-useref

installation

use

API

Guess you like