gulp-uglifyjs

Minify multiple files with UglifyJS.

gulp-uglifyjs

DEPRECATED: This plugin has been blacklisted as it relies on Uglify to concat the files instead of using gulp-concat, which breaks the "It should do one thing" paradigm. When I created this plugin, there was no way to get source maps to work with gulp, however now there is a gulp-sourcemapsplugin that achieves the same goal. gulp-uglifyjs still works great and gives very granular control over the Uglify execution, I'm just giving you a heads up that other options now exist.

Minify multiple JavaScript with UglifyJS2.

This plugin is based off of gulp-uglifybut allows you to directly use all of Uglify's options. The main difference between these two plugins is that passing in an array of files (or glob pattern that matches multiple files) will pass that array directly to Uglify. Uglify will handle both concatenating and minifying those files.

Letting Uglify handle the concatenation and minification allows for the generated source map to be able to separate the files in the browser for easier debugging, and it avoids the intermediate step of concat(). Using concat()and then uglify()would result in a source map for the already concatenated file which has the possibility of being quite large, making it hard to find the code you are wanting to debug.

Usage

var uglify = require('gulp-uglifyjs');

gulp.task('uglify', function() {
  gulp.src('public/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});

This will concatenate and minify all files found by public/js/*.jsand write it to a file with the same name as the first file found.

API

uglify([filename], [options])

  • filename - optional

    Override the default output filename.

  • options - optional

    These options are directly passed to Uglify. Below are some examples of what is available. To see a full list, read UglifyJS's documentation

    • outSourceMap

      (default false) Give a stringto be the name of the source map. Set to trueand the source map name will be the same as the output file name suffixed with .map.

      Note: if you would like your source map to point to relative paths instead of absolute paths (which you probably will if it is hosted on a server), set the basePathoption to be the base of where the content is served.

    • inSourceMap

      If you're compressing compiled JavaScript and have a source map for it, you can use the inSourceMap argument. This can only be used in conjunction with outSourceMap.

    • sourceRoot

      Sets the root location for where the source files should be found

    • mangle

      (default {}) Set to falseto skip mangling names. See optionsfor possible key/value pairs.

    • output

      (default null) Pass an Object if you wish to specify additional output options. The defaults are optimized for best compression.

    • compress

      (default {}) Pass an Object to specify custom compressor options. Pass falseto skip compression completely.

    • enclose

      (default undefined) Pass an Object to wrap all of the code in a closure with a configurable arguments/parameters list. Each key-value pair in the enclose object is effectively an argument-parameter pair.

    • wrap

      (default undefined) Pass a String to wrap all of the code in a closure. This is an easy way to make sure nothing is leaking. Variables that need to be public exportsand globalare made available. The value of wrap is the global variable exports will be available as.

    • exportAll

      (default false) Set to trueto make all global functions and variables available via the exportvariable. Only available when using wrap.

Examples

To minify multiple files into a 'app.min.js' and create a source map:

gulp.task('uglify', function() {
  gulp.src('public/js/*.js')
    .pipe(uglify('app.min.js', {
      outSourceMap: true
    }))
    .pipe(gulp.dest('dist/js'))
});

To minify multiple files from different paths to 'app.js', but skip mangling and beautify the results:

gulp.task('uglify', function() {
  gulp.src(['public/js/*.js', 'bower_components/**/*.js'])
    .pipe(uglify('app.js', {
      mangle: false,
      output: {
        beautify: true
      }
    }))
    .pipe(gulp.dest('dist/js'))
});

Repository

https://github.com/craigjennings11/gulp-uglifyjs.git


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

相关推荐

  • 解决: ERROR in xx from UglifyJs keyword «const»

    脚手架编译配置在另一个项目里用的时候,报了这个错,解决的时候走了些弯路,记录一下。 1.最容易搜到的解决方式(不推荐用) 这样改是有她的道理的,因为:UglifyJsPlugin不能压缩es...

    7 个月前
  • 简单谈谈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 年前

官方社区

扫码加入 JavaScript 社区