gulp-usemin

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

Deprecated. Please use Browserifyor Webpack

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 and node >= 4.0.

Attention: v0.3.0 options is not compatible with v0.2.0.

Usage

First, install gulp-useminas 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 htmlmin = require('gulp-htmlmin');
var cleanCss = require('gulp-clean-css');
var rev = require('gulp-rev');


gulp.task('usemin', function() {
  return gulp.src('./*.html')
    .pipe(usemin({
      css: [ rev() ],
      html: [ htmlmin({ collapseWhitespace: true }) ],
      js: [ uglify(), rev() ],
      inlinejs: [ uglify() ],
      inlinecss: [ cleanCss(), 'concat' ]
    }))
    .pipe(gulp.dest('build/'));
});

If you need to call the same pipeline twice, you need to define each task as a function that returns the stream object that should be used.

gulp.task('usemin', function() {
  return gulp.src('./*.html')
    .pipe(usemin({
      css: [ rev ],
      html: [ function () {return htmlmin({ collapseWhitespace: true });} ],
      js: [ uglify, rev ],
      inlinejs: [ uglify ],
      inlinecss: [ cleanCss, 'concat' ]
    }))
    .pipe(gulp.dest('build/'));
});

API

Blocks

Blocks are expressed as:

<!-- build:<pipelineId>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
  • pipelineId: pipeline id for options or removeto remove a section
  • 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:htmlimport components-packed.html -->
<link rel="import" href="components-a.html">
<link rel="import" href="components-b.html">
<!-- endbuild -->

<!-- build:js js/lib.js -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->

<!-- build:js1 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 -->

<!-- build:remove -->
<script src="js/localhostDependencies.js"></script>
<!-- endbuild -->

<!-- build:inlinejs -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->

<!-- build:inlinecss -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->

Options

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.

path

Type: String

Default alternate search path for files. Can be overridden by the alternate search path option for a given block.

any pipelineId

Type: Array

If exist used for modify files. If does not contain string 'concat', then it added as first member of pipeline

outputRelativePath

Type: StringRelative location to html file for new concatenated js and css.

enableHtmlComment

Type: Boolean

Keep HTML comment when processing

jsAttributes

Type: Object

Attach HTML attributes to the output js file. For Example :

gulp.task('usemin', function() {
  return gulp.src('./index.html')
    .pipe(usemin({
      html: [],
      jsAttributes : {
        async : true,
        lorem : 'ipsum',
        seq   : [1, 2, 1]
      },
      js: [ ],
      js1:[ ],
      js2:[ ]
    }))
    .pipe(gulp.dest('./'));
});

Will give you :

<script src="./lib.js" async lorem="ipsum" seq="1"></script>
<script src="./app.js" async lorem="ipsum" seq="2"></script>
<script src="./extra.js" async lorem="ipsum" seq="1"></script>

As your built script tag.

skipMissingResources

Type: Boolean

Allows missing resources to be skipped, instead of throwing an error.

Use case

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

We want to optimize foo.jsand bar.jsinto optimized.js, referenced using relative path. index.htmlshould 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 distdirectory. gulpfile.jsshould contain the following block:

gulp.task('usemin', function () {
  return gulp.src('./app/index.html')
      .pipe(usemin({
        js: [uglify()]
        // in this case css will be only concatenated (like css: ['concat']).
      }))
      .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.htmloutput:

<link rel="stylesheet" href="style.css"/>

    <script src="js/optimized.js"></script>

Changelog

#####0.3.30

  • Introduce html import attributes (by jackw)

#####0.3.29

  • Migrate gulp-util to individual modules (by pioug)

#####0.3.28

  • Update dependancies and replace deprecated packages (by JamyGolden)

#####0.3.27

  • Updated glob dependency (by icholy)

#####0.3.26

  • Fix for css media queries (by akempes)

#####0.3.24

  • Added option to skip missing resources (by adamhenson)

#####0.3.23

  • Added support array value for cssAttributes (by MillerRen)

#####0.3.22

  • Added html import support (by linfaxin)

#####0.3.21

  • Added support paths with querystring or hash (by Lanfei)

#####0.3.20

  • Added support array value for jsAttributes (by kuitos)

#####0.3.18

  • Fixed relative path for script in subfolder bug

#####0.3.17

  • Fixed block output when stream returns multiple files (by maksidom)

#####0.3.16

  • Added feature to assign attributes to js script tags (by sohamkamani)

#####0.3.15

  • Allow proper html output when blocks are empty (by ppowalowski)

#####0.3.14

  • fixed #91

#####0.3.13

  • works fine only with gulp-foreach

#####0.3.12

  • fixed #121. Depending on the node >= 0.12.

#####0.3.11

  • fixed #88

#####0.3.10

  • fixed uppercase Q bug (on case-sensetive file systems)

#####0.3.9

  • async tasks support

#####0.3.8

  • allow removal option (by tejohnso)
  • added support for single quotes (by adicirstei)

#####0.3.7

  • ouputRelativePath renamed outputRelativePath

#####0.3.6

  • ouputRelativePath option (by bhstahl)

#####0.3.5

  • Support for conditional comments inside build blocks (by simplydenis)

#####0.3.4

  • When a file does not exist an error containing the missing path is thrown

#####0.3.3

  • fixed dependencies
  • Add support for multiple alternative paths (by peleteiro)

#####0.3.2

  • fixed assetsDir option (by rovjuvano)

#####0.3.1

  • fixed fails to create source map files by uglify({outSourceMap: true})

#####0.3.0

  • new version of options

#####0.2.3

  • fixed html minify bug

#####0.2.2

  • allow gulp-usemin to work with minified source HTML (by CWSpear)
  • fixed alternate path bug (by CWSpear)
  • add assetsDir 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

Repository

https://github.com/zont/gulp-usemin


上一篇:hamlcc
下一篇:DOM事件捕获与冒泡自定义事件

相关推荐

  • 简单谈谈gulp-changed插件

    前言 gulpchanged插件的作用,是用来过滤未被修改过的文件,只有修改后的文件才能通过管道。这样做的好处时,只处理修改后的文件,减少后续程序的执行时间。 根据官方给出的例子: 检测SR...

    3 年前
  • 用gulp构建一个简单常用的的原生环境

    gulp作为一个自动化构建工具,在前端开发中大大的提高了开发效率,前端开发者们可以利用他减少许多繁复无脑的操作。 这里简单构建一个小环境,就可以在以后的学习中,直接新建各种test.html测试我们新...

    2 年前
  • 用gulp实现传统的多页面自动化构建,一句命令行完成混淆压缩

    工作的项目,摄像头的设置页面,要求整站大小只能在100k作用,也就是说vue之类的框架,jquery库这些最好不要用,我们就用js原生语言写,并且每次写完要整站都要压缩混淆再上传,考虑到浏览器文件缓存...

    4 个月前
  • 整理笔记:前端工程构建工具gulp篇

    gulp ,基于 NodeJS 的项目,自动化构建的工具增强你的工作流程! 一、工作原理 前端构建工具,gulp是基于Nodejs,自动化地完成 javascript、coffee、sass、less...

    2 个月前
  • 工具 之 gulp使用

    timg.jpeg(/public/upload/133329767e0a2fa7fa26c36bf41ec8e0) 介绍 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器...

    3 个月前
  • 如何能在每一gulpfile吞重新开始改变?

    jfmercercoool(https://stackoverflow.com/users/754842/jfmercer)提出了一个问题:How can Gulp be restarted upon...

    2 年前
  • 如何用上webpack/gulp/rollup,搭建一个基于Vue的UI库脚手架

    目标:搭建一个基于vue的ui脚手架,库的加载方式支持script标签,模块化加载,组件引入方式支持按需加载和全量加载。 脚手架链接 目录、文件约定 完整的一个组件库脚手架不但应该有合理的组件存...

    5 个月前
  • 如何保存流到Gulp.js多个目的地吗?

    Konstantin Tarkus(https://stackoverflow.com/users/82686/konstantintarkus)提出了一个问题:How to save a strea...

    2 年前
  • 如何gulp压缩,丑化代码

    为什么使用 最近在迭代公司的项目,发现项目有如下缺点: 1. 代码没有压缩,js文件,内存大,放在服务器上占空间; 2. 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑容...

    1 年前
  • 大口大口的gulp.watch不引发新的或已删除的文件?

    gremo(https://stackoverflow.com/users/220180/gremo)提出了一个问题:Gulps gulp.watch not triggered for new or...

    2 年前

官方社区

扫码加入 JavaScript 社区