gulp-usemin2

    0.2.4 • Public • Published

    gulp-usemin

    Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).

    This task is designed for gulp 3.

    Attention: v0.2.0 does not minify the files by default.

    Usage

    First, install gulp-usemin as a development dependency:

    npm install --save-dev gulp-usemin

    Then, add it to your gulpfile.js:

    var usemin = require('gulp-usemin');
    var uglify = require('gulp-uglify');
    var minifyHtml = require('gulp-minify-html');
    var minifyCss = require('gulp-minify-css');
     
    gulp.task('usemin', function() {
      gulp.src('./*.html')
        .pipe(usemin({
          cssmin: minifyCss(),
          htmlmin: minifyHtml(),
          jsmin: uglify()
        }))
        .pipe(gulp.dest('build/'));
    });

    API

    Blocks

    Blocks are expressed as:

    <!-- build:<type>(alternate search path) <path> -->
    ... HTML Markup, list of script / link tags.
    <!-- endbuild -->
    • type: either js or css
    • alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
    • path: the file path of the optimized file, the target output

    An example of this in completed form can be seen below:

    <!-- build:css style.css -->
    <link rel="stylesheet" href="css/clear.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <!-- endbuild -->
     
    <!-- build:js js/app.js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/thing-controller.js"></script>
    <script src="js/models/thing-model.js"></script>
    <script src="js/views/thing-view.js"></script>
    <!-- endbuild -->

    Options

    cssmin

    Type: Object

    Plugin for minify output css.

    htmlmin

    Type: Object

    Plugin for minify output html.

    jsmin

    Type: Object

    Plugin for minify output js.

    assetsDir

    Type: String

    Alternate root path for assets. New concated js and css files will be written to the path specified in the build block, relative to this path. Currently asset files are also returned in the stream.

    rev

    Type: Boolean Default: false

    If true use gulp-rev to revision and rename the asset files. The new asset file names will automatically be used in the html tags.

    Use case

    |
    +- app
    |   +- index.html
    |   +- assets
    |       +- js
    |          +- foo.js
    |          +- bar.js
    |   +- css
    |       +- clear.css
    |       +- main.css
    +- dist
    

    We want to optimize foo.js and bar.js into optimized.js, referenced using relative path. index.html should contain the following block:

        <!-- build:css style.css -->
        <link rel="stylesheet" href="css/clear.css"/>
        <link rel="stylesheet" href="css/main.css"/>
        <!-- endbuild -->
    
        <!-- build:js js/optimized.js -->
        <script src="assets/js/foo.js"></script>
        <script src="assets/js/bar.js"></script>
        <!-- endbuild -->
    

    We want our files to be generated in the dist directory. gulpfile.js should contain the following block:

    gulp.task('usemin', function(){
      gulp.src('./app/index.html')
        .pipe(usemin({jsmin: uglify()}))
        .pipe(gulp.dest('dist/'));
    });

    This will generate the following output:

    |
    +- app
    |   +- index.html
    |   +- assets
    |       +- js
    |          +- foo.js
    |          +- bar.js
    +- dist
    |   +- index.html
    |   +- js
    |       +- optimized.js
    |   +- style.css
    

    index.html output:

        <link rel="stylesheet" href="style.css"/>
    
        <script src="js/optimized.js"></script>
    

    Changelog

    0.2.2
    • allow gulp-usemin to work with minified source HTML (by CWSpear)
    • fixed alternate path bug (by CWSpear)
    • add assetDir option (by pursual)
    • add rev option (by pursual)
    0.2.1
    • fixed subfolders bug
    0.2.0
    • no minification by default. New options API
    0.1.4
    • add alternate search path support
    0.1.3
    • add support for absolute URLs (by vasa-chi)
    0.1.1
    • fixed aggressive replace comments
    0.1.0
    • fixed some bugs. Add tests.
    0.0.2
    • add minification by default
    0.0.1
    • initial release

    Keywords

    none

    Install

    npm i gulp-usemin2

    DownloadsWeekly Downloads

    17

    Version

    0.2.4

    License

    MIT

    Last publish

    Collaborators

    • pursual